基于Ext.Panel编写一个图片列表类
先看效果后上代码
/*
图片列表视图，可以把图片按图片集合的形式展现
未来可能发展为一个功能丰富的图片播放管理工具
<script type="text/javascript" language="javascript" src="/modules/cms/js/pictureview.js"></script>
eg:
var pic = new BeidaSoft.CMS.PictureView({
dataUrl:"somedata.htm"
})
layout.C.add(pic)
传递参数为标准翻页工具条提供的参数如：start、limit等等
数据格式要求为
{
totalCount:100,
rows:[
{
id:"123",
name:"pic1",
smallImageSrc:"",
bigImageSrc:""
},{
name:"pic2"
}
]
}
*/
Ext.namespace('BeidaSoft.CMS');
BeidaSoft.CMS.PictureView = function (config) {
BeidaSoft.CMS.PictureView.superclass.constructor.call(this,config)
}
Ext.extend(BeidaSoft.CMS.PictureView, Ext.Panel,{
border:false,
layout:"fit",
pageSize:20,
dataUrl:"",
store4Pic:null,
initComponent: function () {
//数据源
var store = new Ext.data.JsonStore({
url: this.dataUrl,
root: 'rows',
totalProperty: 'totalCount',
fields: [
{name: 'id', mapping: 'id'},
{name: 'name', mapping: 'name'},
{name: 'smallImageSrc', mapping: 'smallImageSrc'},
{name: 'bigImageSrc', mapping: 'bigImageSrc'}
],
listeners:{
beforeload:function(){
//alert(1)
//return false
},
load:function(){
//alert(2)
},
loadexception:function(misc){
//不符合reader格式的数据也会引发异常
//debugger
//alert(3)
}
}
});
this.store4Pic = store
//翻页工具条
this.bbar = new Ext.PagingToolbar({
pageSize: this.pageSize,
store: this.store4Pic,
displayInfo: true,
emptyMsg: '没有记录'
});
var handler4ClickPic = String.format('Ext.getCmp("{0}").ClickPic("{id}")', this.id)
var currentObject = String.format('Ext.getCmp("{0}")', this.id)
var template = [
'<style>',
'li {float:left;width:145px;height:140px}',
'</style>',
'<ul>',
'<tpl for=".">',
'<li style="height:168px; border: solid 1px #ccc; margin:2px;" class="picture">',
'<dl style="text-align:center;">',
'<dt>',
'<a target="_blank" onclick=Ext.getCmp("{0}").ClickPic("{id}")>',
'<img width="145" height="120" src="{smallImageSrc}" />',
'</a>',
'</dt>',
'<dd style="padding-bottom=0px ;padding-left=0px ;padding-right=0px ;padding-top=0px ;">',
'<label style="text-align:center; display:">',
'<input type="checkbox" id="{id}" name="{name}" />',
"{name}",'</label>',
'<br>',
'<a target="_blank" onclick=Ext.getCmp("{0}").Preview("{id}")>',
'<img src="/modules/cms/images/预览.bmp" title="预览" />',
'</a>',
'<a>',
'<img src="/modules/cms/images/编辑.bmp" title="编辑" />',
'</a>',
'<a target="_blank" onclick=Ext.getCmp("{0}").DeletePic("{id}")>',
'<img src="/modules/cms/images/删除.bmp" title="删除" />',
'</a>',
'</dd>',
'</dl>',
'</li>',
'</tpl>',
'</ul>'
].join("")
template = String.format(template, this.id)
this.tpl4Pic = new Ext.XTemplate(template);
this.dataview4Pic = new Ext.DataView({
store: this.store4Pic,
tpl: this.tpl4Pic,
//因为有的样式是用id写的所以也这么写是不合适的
//id: 'phones',
itemSelector: 'li.phone',
overClass: 'phone-hover',
multiSelect: true,
emptyText: 'No images to display',
autoScroll:true
});
this.items = this.dataview4Pic;
BeidaSoft.CMS.PictureView.superclass.initComponent.call(this);
},
//设置参数
SetBaseParams: function(params) {
//尚未实现
},
//整合数据
LoadData: function () {
this.store4Pic.load()
},
//派生类可以重写这些方法来实现特定的逻辑
//预览图片
Preview:function(id){
//alert(id)
},
//点击图片
ClickPic:function(id){
//alert(id)
},
//删除图片
DeletePic:function(id){
},
//获取选中的记录
GetSelections:function(){
var arrRecord = []
var body = this.body.dom
var arrInput = body.getElementsByTagName("input")
for(var i=0; i<arrInput.length; i++){
var input = arrInput[i]
if(input.checked){
var record = this.store4Pic.getAt(i)
arrRecord.push(record)
}
}
return arrRecord
},
//渲染
onRender: function (ct,position) {
BeidaSoft.CMS.PictureView.superclass.onRender.apply(this,arguments);
this.LoadData();
}
});
Ext.reg("beidasoft.cms.pictureview", BeidaSoft.CMS.PictureView)
图片列表视图，可以把图片按图片集合的形式展现
未来可能发展为一个功能丰富的图片播放管理工具
<script type="text/javascript" language="javascript" src="/modules/cms/js/pictureview.js"></script>
eg:
var pic = new BeidaSoft.CMS.PictureView({
dataUrl:"somedata.htm"
})
layout.C.add(pic)
传递参数为标准翻页工具条提供的参数如：start、limit等等
数据格式要求为
{
totalCount:100,
rows:[
{
id:"123",
name:"pic1",
smallImageSrc:"",
bigImageSrc:""
},{
name:"pic2"
}
]
}
*/
Ext.namespace('BeidaSoft.CMS');
BeidaSoft.CMS.PictureView = function (config) {
BeidaSoft.CMS.PictureView.superclass.constructor.call(this,config)
}
Ext.extend(BeidaSoft.CMS.PictureView, Ext.Panel,{
border:false,
layout:"fit",
pageSize:20,
dataUrl:"",
store4Pic:null,
initComponent: function () {
//数据源
var store = new Ext.data.JsonStore({
url: this.dataUrl,
root: 'rows',
totalProperty: 'totalCount',
fields: [
{name: 'id', mapping: 'id'},
{name: 'name', mapping: 'name'},
{name: 'smallImageSrc', mapping: 'smallImageSrc'},
{name: 'bigImageSrc', mapping: 'bigImageSrc'}
],
listeners:{
beforeload:function(){
//alert(1)
//return false
},
load:function(){
//alert(2)
},
loadexception:function(misc){
//不符合reader格式的数据也会引发异常
//debugger
//alert(3)
}
}
});
this.store4Pic = store
//翻页工具条
this.bbar = new Ext.PagingToolbar({
pageSize: this.pageSize,
store: this.store4Pic,
displayInfo: true,
emptyMsg: '没有记录'
});
var handler4ClickPic = String.format('Ext.getCmp("{0}").ClickPic("{id}")', this.id)
var currentObject = String.format('Ext.getCmp("{0}")', this.id)
var template = [
'<style>',
'li {float:left;width:145px;height:140px}',
'</style>',
'<ul>',
'<tpl for=".">',
'<li style="height:168px; border: solid 1px #ccc; margin:2px;" class="picture">',
'<dl style="text-align:center;">',
'<dt>',
'<a target="_blank" onclick=Ext.getCmp("{0}").ClickPic("{id}")>',
'<img width="145" height="120" src="{smallImageSrc}" />',
'</a>',
'</dt>',
'<dd style="padding-bottom=0px ;padding-left=0px ;padding-right=0px ;padding-top=0px ;">',
'<label style="text-align:center; display:">',
'<input type="checkbox" id="{id}" name="{name}" />',
"{name}",'</label>',
'<br>',
'<a target="_blank" onclick=Ext.getCmp("{0}").Preview("{id}")>',
'<img src="/modules/cms/images/预览.bmp" title="预览" />',
'</a>',
'<a>',
'<img src="/modules/cms/images/编辑.bmp" title="编辑" />',
'</a>',
'<a target="_blank" onclick=Ext.getCmp("{0}").DeletePic("{id}")>',
'<img src="/modules/cms/images/删除.bmp" title="删除" />',
'</a>',
'</dd>',
'</dl>',
'</li>',
'</tpl>',
'</ul>'
].join("")
template = String.format(template, this.id)
this.tpl4Pic = new Ext.XTemplate(template);
this.dataview4Pic = new Ext.DataView({
store: this.store4Pic,
tpl: this.tpl4Pic,
//因为有的样式是用id写的所以也这么写是不合适的
//id: 'phones',
itemSelector: 'li.phone',
overClass: 'phone-hover',
multiSelect: true,
emptyText: 'No images to display',
autoScroll:true
});
this.items = this.dataview4Pic;
BeidaSoft.CMS.PictureView.superclass.initComponent.call(this);
},
//设置参数
SetBaseParams: function(params) {
//尚未实现
},
//整合数据
LoadData: function () {
this.store4Pic.load()
},
//派生类可以重写这些方法来实现特定的逻辑
//预览图片
Preview:function(id){
//alert(id)
},
//点击图片
ClickPic:function(id){
//alert(id)
},
//删除图片
DeletePic:function(id){
},
//获取选中的记录
GetSelections:function(){
var arrRecord = []
var body = this.body.dom
var arrInput = body.getElementsByTagName("input")
for(var i=0; i<arrInput.length; i++){
var input = arrInput[i]
if(input.checked){
var record = this.store4Pic.getAt(i)
arrRecord.push(record)
}
}
return arrRecord
},
//渲染
onRender: function (ct,position) {
BeidaSoft.CMS.PictureView.superclass.onRender.apply(this,arguments);
this.LoadData();
}
});
Ext.reg("beidasoft.cms.pictureview", BeidaSoft.CMS.PictureView)
