ExtJS4學習筆記十－－Grid使用

一、grid的例： 

//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "組長", width: 50, dataIndex: 'leader',
    xtype: 'booleancolumn',//Ext.grid.column.Boolean布爾列
    trueText: '是',
    falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
    xtype : 'datecolumn',//Ext.grid.column.Date日期列
    format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪資", width: 50, dataIndex: 'salary',
    xtype: 'numbercolumn',//Ext.grid.column.Number數字列
    format:'0,000'//數字格式化字符串
}

xtype: 'actioncolumn',//Ext.grid.column.Action動作列
items: [{
    icon: 'images/edit.gif',//指定編輯圖標資源的URL
    handler: function(grid, rowIndex, colIndex) {
        //獲取被操作的數據記錄
        var rec = grid.getStore().getAt(rowIndex);
        alert("編輯 " + rec.get('name'));
    }
},{
    icon: 'images/del.gif',//指定編輯圖標資源的URL
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("刪除 " + rec.get('name'));
    }
},{
    icon: 'images/save.gif',//指定編輯圖標資源的URL
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("保存 " + rec.get('name'));
    }
}]

{
    header: "描述", width: 100,
    xtype: 'templatecolumn',//Ext.grid.column.Template數字列
    tpl : '{name}<tpl if="leader == false">不</tpl>是組長'
}

Ext.create('Ext.grid.RowNumberer',{text : '行號', width : 35})

二、自定義渲染函數示例： 

//定義渲染函數，格式化性別顯示
function formatSex(value){
    return value=='man'?'男':'<font color=red>女</font>';
}
//定義渲染函數，格式化年齡顯示
function formatAge(value,metadata){
    if(value < 30){  //年齡小於30的設置背景顏色爲#CCFFFF
        metadata.style = 'background-color:#CCFFFF;';
    }
    return value;
}

columns: [//配置表格列
                {header: "id", width: 30, dataIndex: 'id'},
                {header: "姓名", width: 50, dataIndex: 'name'},
                {header: "性別", width: 50, dataIndex: 'sex',renderer:formatSex},
                {header: "生日", width: 100, dataIndex: 'birthday',
                    //格式化生日顯示
renderer:Ext.util.Format.dateRenderer('Y年m月d日')             },
                {header: "年齡", width: 50, dataIndex: 'age',renderer:formatAge}
            ]

三、Ext.selection.CellModel（單元格選擇模式）示例 

//創建表格數據
var datas = [
    [100,'張三',24], [200,'李四',30], [300,'王五',29]
];
//創建Grid表格組件
var grid = Ext.create('Ext.grid.Panel',{
    title : '單元格選擇模式示例',
    renderTo: Ext.getBody(),
    width:200,
    height:170,
    frame:true,
    selType: 'cellmodel',//設置爲單元格選擇模式Ext.selection.CellModel
    tbar : [{
        text : '取得所選單元格',
        handler : function(){
            var cell = grid.getSelectionModel().getCurrentPosition();
            alert(Ext.JSON.encode(cell));
        }
    }],
    store: {//配置數據源
        fields: ['id','name','age'],//定義字段
        proxy: {
            type: 'memory',//Ext.data.proxy.Memory內存代理
            data : datas,//讀取內嵌數據
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true//自動加載
    },
    columns: [//配置表格列
        {header: "id", width: 30, dataIndex: 'id', sortable: true},
        {header: "姓名", width: 80, dataIndex: 'name', sortable: true},
        {header: "年齡", width: 80, dataIndex: 'age', sortable: true}
    ]
});

四、Ext.selection.RowModel（行選擇模式）示例－－主要相關代碼 

simpleSelect : true,//啓用簡單選擇功能
multiSelect : true,//支持多選
selType: 'rowmodel',//設置爲單元格選擇模式Ext.selection.RowModel
tbar : [{
    text : '取得所選行',
    handler : function(){
        var msg = '';
        var rows = grid.getSelectionModel().getSelection();
        for(var i = 0; i < rows.length; i++){
            msg = msg + rows[i].get('name') + '\n';
        }
        alert(msg);
    }
}]

五、Ext.selection.CheckboxModel（複選框選擇模式）示例－－關鍵代碼 

//註冊複選框選擇模式別名爲selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');

multiSelect : true,//支持多選
            selModel: {
                selType : 'checkboxmodel'//複選框選擇模式Ext.selection.CheckboxModel
            },
            tbar : [{
                text : '取得所選行',
                handler : function(){
                    var msg = '';
                    var rows = grid.getSelectionModel().getSelection();
                    for(var i = 0; i < rows.length; i++){
                        msg = msg + rows[i].get('name') + '\n';
                    }
                    alert(msg);
                }
            }]

六、grid中的features使用 
Ext.grid.feature.RowBody示例－－關鍵代碼

features: [Ext.create('Ext.grid.feature.RowBody',{
    getAdditionalData: function(data, idx, record, orig) {
        var headerCt = this.view.headerCt,
            colspan  = headerCt.getColumnCount();//獲取表格的列數

        return {
            rowBody: record.get('introduce'),//指定行體內容
            rowBodyCls: 'rowbodyColor',//指定行體樣式
            rowBodyColspan: colspan//指定行體跨列的列數
            };
        }
    })]

Ext.grid.feature.Summary示例－－關鍵代碼

features: [{
    ftype: 'summary'//Ext.grid.feature.Summary表格彙總特性
}],
columns: [//配置表格列
    {header: "姓名", flex: 1, dataIndex: 'name',
        summaryType: 'count',//求數量
        summaryRenderer: function(value){
            return '員工總數：'+value
        }
    },
    {header: "薪資", flex: 1, dataIndex: 'salary',
        summaryType: 'average',//求平均值
        summaryRenderer: function(value){
            return '平均薪資：'+value
        }
    }
]

Ext.grid.feature.Grouping示例－－關鍵代碼

features: [Ext.create('Ext.grid.feature.Grouping', {
    groupByText : '用本字段分組',
    showGroupsText : '顯示分組',
    groupHeaderTpl: '性別: {name} ({rows.length})', //分組標題模版
    startCollapsed: true //設置初始分組是否收起
})],
columns: [//配置表格列
    {header: "姓名", flex: 1, dataIndex: 'name'},
    {header: "性別", flex: 1, dataIndex: 'sex'},
    {header: "年齡", flex: 1, dataIndex: 'age'}
]

Ext.grid.feature.GroupingSummary示例－－關鍵代碼

features: [Ext.create('Ext.grid.feature.GroupingSummary', {
    groupByText : '用本字段分組',
    showGroupsText : '顯示分組',
    groupHeaderTpl: '性別: {name} ({rows.length})', //分組標題模版
    startCollapsed: true //設置初始分組是否收起
})],
columns: [//配置表格列
    {header: "姓名", width: 100, dataIndex: 'name',
        summaryType: 'count',//求數量
        summaryRenderer: function(value){
            return '員工總數：'+value
        }
    },
    {header: "性別", width: 50, dataIndex: 'sex'},
    {header: "年齡", width: 110, dataIndex: 'age',
        summaryType: 'average',//求數量
        summaryRenderer: function(value){
            return '平均年齡：'+value
        }
    }
]

七、Ext.grid.plugin.CellEditing示例－－關鍵代碼 

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1//設置鼠標單擊1次進入編輯狀態
    })
],
selType: 'cellmodel',//設置爲單元格選擇模式
columns: [//配置表格列
  Ext.create('Ext.grid.RowNumberer',{text : '行號', width : 35}),
  {header: "姓名", width: 50, dataIndex: 'name',
        editor: {//文本字段
            xtype:'textfield',
            allowBlank:false
        }
    },
    {header: "生日", width: 100, dataIndex: 'birthday',
        xtype : 'datecolumn',//Ext.grid.column.Date日期列
        format : 'Y年m月d日',//日期格式化字符串
        editor: {//日期字段
            xtype:'datefield',
            allowBlank:false
        }
    },
    {header: "薪資", width: 50, dataIndex: 'salary',
        xtype: 'numbercolumn',//Ext.grid.column.Number數字列
        format:'0,000',//數字格式化字符串
        editor: {//數字字段
            xtype:'numberfield',
            allowBlank:false
        }
    }
]

八、Ext.grid.plugin.RowEditing示例－－關鍵代碼 

plugins: [
    //行編輯模式
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })
],
selType: 'rowmodel',//設置爲單元格選擇模式
columns: [//配置表格列
    Ext.create('Ext.grid.RowNumberer',{text : '行號', width : 35}),
    {header: "姓名", width: 50, dataIndex: 'name',
        editor: {//文本字段
            xtype:'textfield',
            allowBlank:false
        }
    },
    {header: "生日", width: 100, dataIndex: 'birthday',
        xtype : 'datecolumn',//Ext.grid.column.Date日期列
        format : 'Y年m月d日',//日期格式化字符串
        editor: {//日期字段
            xtype:'datefield',
            allowBlank:false
        }
    },
    {header: "薪資", width: 50, dataIndex: 'salary',
        xtype: 'numbercolumn',//Ext.grid.column.Number數字列
        format:'0,000',//數字格式化字符串
        editor: {//數字字段
            xtype:'numberfield',
            allowBlank:false
        }
    }
]

九、Ext.grid.plugin.DragDrop示例－－關鍵代碼 

viewConfig: {
    plugins: [
        //行編輯模式
        Ext.create('Ext.grid.plugin.DragDrop',{
            dragGroup: 'grid1',//拖拽組名稱
            dropGroup: 'grid2'//拖放組名稱
        })
    ]
}

十、Ext.grid.property.Grid示例 

//創建屬性表格
var grid = new Ext.grid.property.Grid({
    title: 'Ext.grid.property.Grid示例',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    //自定義屬性編輯器
    customEditors : {
        "性別" : new Ext.form.ComboBox({
            editable : false,
            displayField:'sex',
            mode: 'local',
            triggerAction: 'all',
            store:new Ext.data.SimpleStore({
                fields: ['sex'],
                data : [['男'],['女']]
            })
        }),
        "出生日期": new Ext.form.DateField({
            format : 'Y年m月d日',
            selectOnFocus:true,
            allowBlank : false
        })
    },
    //自定義渲染函數
    customRenderers: {
        //格式化布爾值顯示
        "是否已婚": function(v){
            return v?'是':'否';
        },
        //格式化日期顯示
        "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
    },
    source: {
        "員工名稱" : "張三",
        "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
        "性別" : '男',
        "是否已婚" : false,
        "年齡" : 29
    }
});