ExtJS3 DataView和ListView

Ext.ns("Application");
Application = function(config){
    Ext.apply(config);
};
Ext.onReady(function(){
    var employees = [
        { emp_id:1, name:'kevin Duriant', title:'CEO', gender:'M'},
        { emp_id:2, name:'Chirs Bosh', title:'CIO', gender:'M'},
        { emp_id:3, name:'James Harden', title:'CFO', gender:'M'},
        { emp_id:4, name:'Tony Allen', title:'SA', gender:'F'},
        { emp_id:5, name:'Tim Ducan', title:'SA', gender:'F'},
        { emp_id:6, name:'Lerbon James', title:'ENG', gender:'M'},
        { emp_id:7, name:'Jimmy Lin', title:'SAL', gender:'M'},
        { emp_id:8, name:'Ray Allen', title:'Saint', gender:'F'}
    ];
                      
    var store = new Ext.data.JsonStore({
        proxy:new Ext.ux.data.PagingMemoryProxy(employees),
        fields:[
            {name:'id', type:'int', mapping:'emp_id'},
            {name:'name', type:'string', mapping:'name'},
            {name:'title', type:'string', mapping:'title'},
            {name:'gender', type:'string', mapping:'gender'}
        ]
    });
                      
    var template = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="rec_wrap">',
                '<div class="div_{title}">',
                    '<h2>{name}</h2>',
                    '<span">{gender}</span>',
                    '<h3>{title}</h3>',
                '</div>',
            '</div>',
        '</tpl>'
    );
                      
    var dataview = new Ext.DataView({
        tpl:template,
        store:store,
        singleSelect:true,
        itemSelector:'div.rec_wrap',
        selectedClas:'rec_selected',
        overClass:'rec_over',
        height:200,
        autoScroll:true
    });
                      
    var titleTpl =
        '<tpl if="title==\'SA\'">' +
            '<b>特助</b>'+
        '</tpl>';
                          
    var columns = [
        {header:'序号', dataIndex:'id', width:.12},
        {header:'姓名', dataIndex:'name'},
        {header:'职称', dataIndex:'title', tpl:titleTpl, width:.2},
        {header:'性别', dataIndex:'gender', width:.12}
    ];
                      
    var listview = new Ext.list.ListView({
        store:store,
        columns:columns,
        autoScroll:true
    });
                      
    var panel = new Ext.Panel({
        title:'DataView Panle',
        items:[dataview],
        frame:true,
        bbar:[{
            xtype:'paging',
            store:store,
            pageSize:4
        }]
    });
                      
//  var panel = new Ext.Panel({
//      title:'LisView Panle',
//      items:[listview],
//      frame:true
//  });
                      
//  var panel = new Ext.Panel({
//      title:'PropertyGrid Panle',
//      items:[listview],
//      frame:true
//  });
                      
    panel.on('afterrender', function(){
        store.load();
    });
    panel.render('container');
                      
                      
});
/**
 *  ListView 适用于在数据量小,结构简单的数据上,如菜单分类、友情链接等数量固定且不易变动的数据上,
 *  字段如果需要特殊的呈现逻辑,必须把逻辑写错XTemplate字符串,指定给字段的tpl属性
 */

点击查看原图点击查看原图

知识共享许可协议
《ExtJS3 DataView和ListView》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     166.65ms