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

posted @ 2012-05-09 13:00 布尔阅读(1445) 评论(0) 编辑收藏举报

刷新页面返回顶部

boolean

基于Ext.Panel编写一个图片列表类

公告