基于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;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)