ExtJs表格控件Grid

下面介绍三种ExtJs中最常见的表格控件:GridPanel,EditorGridPanel,PropertyGrid.

1.创建普通的Grid表格

/**  
   创建普通的Grid表格  
 */  
function createGridPanel(){   
    var myData = [//以数组的形式定义数据   
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am','www.baidu.com'],   
        ['Alcoa Inc',29.01,0.42,1.47,'10/1 12:00am','www.163.com'],   
        ['Boeing Co.',75.43,0.53,0.71,'9/2 12:00am','www.sina.com.cn'],   
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am','www.iteye.com'],   
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'8/30 12:00am','www.oracle.com']   
    ];   
    var myStore = new Ext.data.ArrayStore({//定义用于存放数据的store,并且为每个字段取名   
        data: myData,//把数据绑定到store   
        fields: [//为每列取名,并且设置数据类型   
           {name: 'name'},   
           {name: 'price', type: 'float'},   
           {name: 'change', type: 'float'},   
           {name: 'pctChange', type: 'float'},   
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},   
           'url'  
        ]   
    }) ;   
    var myGrid = new Ext.grid.GridPanel({//定义列表   
        store: myStore,//把定义好的store绑定到此列表   
        columns: [//根据在store中定义的列名,把列数据绑定到相应的列表头   
            {header: '姓名', width: 200, sortable: true, dataIndex: 'name'},//dataIndex:store中定义的fieldname.   
            {header: '价格', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//renderer: Ext.util.Format.usMoney,显示美元的货币符号   
            {header: '改变', renderer:function(v){   
                if(v<=0){   
                    return "<font color='red'>"+v+"</font>" ;   
                }else{   
                    return v ;   
                }   
            }, dataIndex: 'change'},   
            {header: '改变百分比', dataIndex: 'pctChange'},   
            {   
                header: '最后改变时间', width: 135, dataIndex: 'lastChange',   
                xtype: 'datecolumn', format: 'Y-m-d'//显示日期型变量的格式   
            },   
            {header: '网址', renderer: function(v){   
                return v.link(v) ;//渲染成超链接形式   
            }, dataIndex: 'url'}]   
    }) ;   
       
    new Ext.Viewport({layout:'fit',items:myGrid}) ;//充满整个body显示列表   
}  

 

2.创建可编辑的Grid表格

 

/**  
   创建可编辑的Grid表格  
   注意:EditorGrid与Grid的区别在于,在要想设置成可编辑的列中定义如下属性editor: Ext.form.TextField(DateField)  
 */  
function createEditorGridPanel(){   
    var myData = [//以数组的形式定义数据   
        ['3m Co',71.72,0.02,0.03,new Date(),'www.baidu.com'],   
        ['Alcoa Inc',29.01,0.42,1.47,new Date(),'www.163.com'],   
        ['Boeing Co.',75.43,0.53,0.71,new Date(),'www.sina.com.cn'],   
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,new Date(),'www.iteye.com'],   
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,new Date(),'www.oracle.com']   
    ];   
    var myStore = new Ext.data.ArrayStore({//定义用于存放数据的store,并且为每个字段取名   
        data: myData,//把数据绑定到store   
        fields: [//为每列取名,并且设置数据类型   
           {name: 'name'},   
           {name: 'price', type: 'float'},   
           {name: 'change', type: 'float'},   
           {name: 'pctChange', type: 'float'},   
           {name: 'lastChange', type: 'date'},   
           'url'  
        ]   
    }) ;   
    var myGrid = new Ext.grid.EditorGridPanel({//定义列表   
        store: myStore,//把定义好的store绑定到此列表   
        columns: [//根据在store中定义的列名,把列数据绑定到相应的列表头   
            {header: '姓名', width: 200, sortable: true,editor: Ext.form.TextField, dataIndex: 'name'},//dataIndex:store中定义的fieldname.   
            {header: '价格', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//renderer: Ext.util.Format.usMoney,显示美元的货币符号   
            {header: '改变', renderer:function(v){   
                if(v<=0){   
                    return "<font color='red'>"+v+"</font>" ;   
                }else{   
                    return v ;   
                }   
            }, dataIndex: 'change'},   
            {header: '改变百分比', dataIndex: 'pctChange'},   
            {   
                header: '最后改变时间', width: 135, dataIndex: 'lastChange',editor: Ext.form.DateField,//此字段可以编辑   
                xtype: 'datecolumn', format: 'Y-m-d H:i:s'//显示日期型变量的格式   
            },   
            {header: '网址', renderer: function(v){   
                return v.link(v) ;//渲染成超链接形式   
            }, dataIndex: 'url'}]   
    }) ;   
       
    new Ext.Viewport({layout:'fit',items:myGrid}) ;//充满整个body显示列表   
}  

 

3.创建Property(Key-value)的Grid表格

/**  
   创建Property(Key-value)的Grid表格  
   下在source中定义的是name及对应的value(默认值),在页面的列表中可以对value进行编辑修改  
 */  
function createPropertyGridPanel(){   
       
    var grid = new Ext.grid.PropertyGrid({   
        title: 'Properties Grid',   
        autoHeight: true,   
        width: 300,   
        source: {   
            "(name)": "My Object",   
            "Created": new Date(),   
            "Available": false,   
            "Version": .01,   
            "Description": "A test object"  
        }   
    });   
    new Ext.Viewport({layout:'fit',items:grid}) ;//充满整个body显示列表   
}  

  4.载入相应的列表

 

/**  
   载入相应的列表  
 */  
//Ext.onReady(createGridPanel);   
//Ext.onReady(createEditorGridPanel);   
Ext.onReady(createPropertyGridPanel);