先看效果后上代码

/*

    图片列表视图，可以把图片按图片集合的形式展现

    未来可能发展为一个功能丰富的图片播放管理工具

    <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" οnclick=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" οnclick=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" οnclick=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)