Extjs4 GridPanel 的幾種樣式使用介紹

2019-11-20 22:48:05

字體：大中小

來源：轉載

供稿：網友

簡單表格

排序,顯示某列,讀取本地數據

//本地數據 
var datas = [ 
['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man'] 
]; 
//創建面板 
Ext.create('Ext.grid.Panel', { 
title: 'easy grid', 
width: 400, 
height: 300, 
renderTo: Ext.getBody(), 
frame: true, 
viewConfig: { 
forceFit: true, 
stripRows: true 
}, 
store: {//配置數據代理 

fields: ['id', 'name', 'gender'], 
proxy: { 
type: 'memory', 
data: datas, 
reader: 'array' //數據讀取器為 數據讀取 

}, 
autoLoad: true 
}, 
columns: [{ //自定義列信息 
header: 'id', 
width: 30, 
dataIndex: 'id', //綁定fields中得字段 
sortable: true 
}, { 
header: 'name', 
width: 80, 
dataIndex: 'name', 
sortable: true 
}, { 
header: 'gender', 
width: 80, 
dataIndex: 'gender', 
sortable: true 
} 

] 

}) 

表格列:
行號, bool行轉成是否,日期格式化輸出(date,top day), number數據類型格式化輸出(change,volume),Action列(操作列)

代碼;

復制代碼代碼如下:

Ext.tip.QuickTipManager.init(); 
Ext.create('Ext.data.Store', { 
storeId: 'sampleStore', 
fields: [{ 
name: 'framework', 
type: 'string' 
}, { 
name: 'rocks', 
type: 'boolean' 
}, { 
name: 'volume', 
type: 'number' 
}, { 
name: 'topday', 
type: 'date' 
}, { 
name: 'change', 
type: 'number' 
}, { 
name: 'date', 
type: 'date' 
}, { 
name: 'price', 
type: 'number' 
} 

], 
data: { 
'items': [{ 
"framework": "Ext JS 1", 
"rocks": true, 
"symbol": "goog", 
"date": '2011/04/22', 
"change": 0.8997, 
"volume": 3053782, 
"topday": '04/11/2010', 
"price": 1000.23 

}, { 
"framework": "Ext JS 2", 
"rocks": true, 
"symbol": "goog", 
"date": '2011/04/22', 
"change": 0.8997, 
"volume": 3053782, 
"topday": '04/11/2010', 
"price": 1000.23 

}, { 
"framework": "Ext JS 3", 
"rocks": true, 
"symbol": "goog", 
"date": '2011/04/22', 
"change": 0.8997, 
"volume": 3053782, 
"topday": '04/11/2010', 
"price": 1000.23 

}] 
}, 
proxy: { 
type: 'memory', 
reader: { 
type: 'json', 
root: 'items' 
} 
} 
}); 

Ext.create('Ext.grid.Panel', { 
title: 'Boolean Column Demo', 
store: Ext.data.StoreManager.lookup('sampleStore'), 
columns: [ 
Ext.create('Ext.grid.RowNumberer', { text: '行號', width: 40 }), 
{ 
text: 'Framework', 
dataIndex: 'framework', 
width: 100 
}, { 
xtype: 'booleancolumn', 
text: 'Rocks', 
trueText: '是', 
falseText: '否', 
dataIndex: 'rocks' 
}, { 
text: 'Date', 
dataIndex: 'date', 
xtype: 'datecolumn', 
format: 'Y年m月d日' 
}, { 
text: 'Change', 
dataIndex: 'change', 
xtype: 'numbercolumn', 
format: '0.000' 
}, { 
text: 'Volume', 
dataIndex: 'volume', 
xtype: 'numbercolumn', 
format: '0,000' 
}, { 
text: 'Top Day', 
dataIndex: 'topday', 
xtype: 'datecolumn', 
format: 'l' 
}, { 
text: 'Current Price', 
dataIndex: 'price', 
renderer: Ext.util.Format.usMoney 
}, { 
header: '操作', 
xtype: 'actioncolumn', //操作列 
width: 100, 
items: [{ 
icon: 'e.gif', // 編輯圖片地址 

tooltip: ‘編輯', //鼠標over顯示的文字 使用此功能,必須 Ext.tip.QuickTipManager.init(); 
handler: function (grid, rowIndex, colIndex) { 
var rec = grid.getStore().getAt(rowIndex); 
alert("Edit " + rec.get('framework')); 
} 
}, { 
icon: 'd.gif', 
tooltip: 'Delete', 
handler: function (grid, rowIndex, 
colIndex) { 
var rec = grid.getStore().getAt(rowIndex); 
alert("Terminate " + rec.get('framework')); 
} 
}] 

}, { 

} 
], 
height: 200, 
width: 800, 
renderTo: Ext.getBody() 
}); 

下面這個圖是單擊操作(編輯,刪除)按鈕觸發的回調函數的詳細信息.

下面演示自定義渲染函數

效果:

復制代碼代碼如下:

Ext.tip.QuickTipManager.init(); 
function customFunction(value, metadata) { 
if (value > 10) { 
metadata.style = 'color:red'; 

} 
return value; 

} 

Ext.create('Ext.data.Store', { 
storeId: 'sampleStore', 
fields: [ { 
name: 'custom', 
type: 'number' 
} 

], 
data: { 
'items': [{ 

"custom": 10 

}, { 

"custom": 100 

}, { 

"custom": 1000 

}] 
}, 
proxy: { 
type: 'memory', 
reader: { 
type: 'json', 
root: 'items' 
} 
} 
}); 

Ext.create('Ext.grid.Panel', { 
title: 'Boolean Column Demo', 
store: Ext.data.StoreManager.lookup('sampleStore'), 
columns: [ 
Ext.create('Ext.grid.RowNumberer', { text: '行號', width: 40 }), 
{ 
text: 'custom', 
dataIndex: 'custom', 
renderer: customFunction //調用自定義函數 來渲染 
} 
], 
height: 200, 
width: 800, 
renderTo: Ext.getBody() 
}); 

選擇模式:Selection

選擇模式分為三類:

1,行選擇(默認)

2.單元格選擇

3.復選框選擇(checkbox組)

演示單元格選擇代碼:

只需在上述代碼配置節當中,加入

復制代碼代碼如下:

tbar: [ 
{ 
text: '取得所選單元格', 
handler: function () { 

var cell = grid.getSelectionModel().getCurrentPosition(); //getSelectionModel()獲取當前選擇模式,getCurrentPosition()獲取當前選擇的單元格 
alert(Ext.JSON.encode(cell)); 
} 
} 
], 
selType:'cellmodel' //設置 選擇模式 為 單元格選擇

行選擇:

效果:

復制代碼代碼如下:

tbar: [ 
{ 
text: '取得所選行', 
handler: function () { 

var rows = grid.getSelectionModel().getSelection(); //getSelection();獲取當前選中的記錄數組 
var msg = []; 
for (var i = 0; i < rows.length; i++) { 

var row = rows[i]; 
var myDate = new Date(row.get('date')); 
msg.push('選中行的Date列:' + myDate.toLocaleString()); //轉換時間格式 

} 
alert(msg.join('/n')); 

} 
} 
], 
selType: 'rowmodel', //選擇模式為 行選擇 
simpleSelect: true, //簡單選擇功能開啟 
multiSelect: true, // 啟用多行選擇 
enableKeyNav: true //啟用鍵盤導航 

復選框選擇:

效果:

復制代碼代碼如下:

tbar: [
               {
                   text: '取得所選行',
                   handler: function () {

                       var rows = grid.getSelectionModel().getSelection(); //getSelection();獲取當前選中的記錄數組
                       var msg = [];
                       for (var i = 0; i < rows.length; i++) {

var row = rows[i];
var myDate = new Date(row.get('date'));

var s = grid.getStore(); //獲取grid的數據源
var number = s.indexOf(row) + 1; //獲取行號+1 因為行號從0開始

msg.push('選中第' + number + '行的Date列:' + myDate.toLocaleString());

}
alert(msg.join('/n'));

                   }
               }
               ],
               selType: 'checkboxmodel', //選擇模式為行選擇
               simpleSelect: true,    //簡單選擇功能開啟
               multiSelect: true,       // 啟用多行選擇
               enableKeyNav: true     //啟用鍵盤導航

表格特性: Feature

表格匯總 Ext.grid.feature.Summary

匯總值計算根據表格的每一列進行計算,計算方式有指定的 summaryType決定.默認的有

上圖5種.

此例應用 sum和average

復制代碼代碼如下:

Ext.define('TestResult', {
                extend: 'Ext.data.Model',
                fields: ['student', {
                    name: 'mark',
                    type: 'int'
                }]
            });

            var grid = Ext.create('Ext.grid.Panel', {
                width: 200,
                height: 140,
                renderTo: document.body,
                features: [{
                    ftype: 'summary'
                }],
                store: {
                    model: 'TestResult',
                    data: [{
                        student: 'Student 1',
                        mark: 84
                    }, {
                        student: 'Student 2',
                        mark: 72
                    }, {
                        student: 'Student 3',
                        mark: 96
                    }, {
                        student: 'Student 4',
                        mark: 68
                    }]
                },
                columns: [{
                    dataIndex: 'student',
                    text: 'Name',
                    summaryType: 'count', //進行匯總的列名
                    summaryRenderer: function (value) {
                        grid.getStore()
                        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
                    }
                }, {
                    dataIndex: 'mark',
                    text: 'Mark',
                    summaryType: 'average'
                }]
            })
            var grid = Ext.create('Ext.grid.Panel', {
                width: 200,
                height: 140,
                renderTo: document.body,
                features: [{
                    ftype: 'summary'
                }],
                store: {
                    model: 'TestResult',
                    data: [{
                        student: 'Student 1',
                        mark: 84
                    }, {
                        student: 'Student 2',
                        mark: 72
                    }, {
                        student: 'Student 3',
                        mark: 96
                    }, {
                        student: 'Student 4',
                        mark: 68
                    }]
                },
                columns: [{
                    dataIndex: 'student',
                    text: 'Name',
                    summaryType: 'count', //進行匯總的列名
                    summaryRenderer: function (value) {
                      // grid.getStore()
                        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
                    }
                }, {
                    dataIndex: 'mark',
                    text: 'Mark',
                    summaryType: 'average',

,
                    summaryRenderer: function (value) {
                        // grid.getStore()
                        return Ext.String.format(' 平均分為:{0}', value);

}]
})

表格分組:Ext.grid.feature.Grouping

代碼:

復制代碼代碼如下:

Ext.define('TestResult', { 
extend: 'Ext.data.Model', 
fields: ['student', 'class', { 
name: 'mark', 
type: 'int' 
}] 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
width: 400, 
height: 300, 
renderTo: document.body, 
features: [ 
Ext.create('Ext.grid.feature.Grouping', 
{ 

groupByText: '用本字段分組', 
showGroupsText: '顯示分組', 
groupHeaderTpl: '班級: {name} ({rows.length})', //分組顯示的模板 
startCollapsed: true //設置初始分組是不是收起 
}) 
], 
store: { 
model: 'TestResult', 
groupField: 'class', 
data: [{ 
student: 'Student 1', 
class: '1', 
mark: 84 
}, { 
student: 'Student 2', 
class: '1', 
mark: 72 
}, { 
student: 'Student 3', 
class: '2', 
mark: 96 
}, { 
student: 'Student 4', 
class: '2', 
mark: 68 
}] 
}, 
columns: [{ 
dataIndex: 'student', 
text: 'Name', 
summaryType: 'count', //進行匯總的列名 
summaryRenderer: function (value) { 
grid.getStore() 
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : ''); 
} 
}, { 
dataIndex: 'mark', 
text: 'Mark', 
summaryType: 'average' 
}, 
{ dataIndex: 'class', 
text: 'class' 
}] 
}) 
//在不同的列下面點擊 “用本字段分組”那么表格就會立即改變分組規則. 

表格的分組匯總:Ext.grid.feature.GroupSummary

代碼只需要把上面的 Grouping 改成 GroupingSummary

表格插件: plugin

單元格編輯 Ext.grid.plugin.CellEditing

代碼:

復制代碼代碼如下:

var datas = [['gao', Date(1922, 02, 03), 2000]]; 
Ext.create('Ext.grid.Panel', { 

title: '演示', 
frame: true, 
renderTo: Ext.getBody(), 
width: 400, 
height: 300, 

store: { 
fields: ['name', 'birth', 'salary'], 
data: datas, 
proxy: { 
type: 'memory', 
data: datas, 
reader: 'array' 
}, 
autoLoad: true 
}, 
plugins: [ 
Ext.create('Ext.grid.plugin.CellEditing', { 

clicksToEdit: 1 
}) 
], 
selType: 'cellmodel', 
columns: [Ext.create('Ext.grid.RowNumberer', { text: '行號', width: 40 }), 
{ 
header: '姓名', 
width: 80, 
dataIndex: 'name', 
editor: {//定義字段 
xtype: 'textfield', 
allowBlank: false, 

} 
} 
, 
{ 
header: '生日', 
width: 100, 
dataIndex: 'birth', 
xtype: 'datecolumn', 
editor: {//定義字段 
xtype: 'datefield', 
format: 'Y-m-d', 
allowBlank: false 
} 
} 
, 
{ 
header: '工資', 
width: 100, 
dataIndex: 'salary', xtype: 'numbercolumn', 
editor: {//定義字段 
xtype: 'numberfield', 
format: '$0,000', 
allowBlank: false 
} 
} 
] 


}) 

表格行編輯器Ext.grid.plugin.RowEditing

代碼只需:把 CellEditing 改成 RowEditing

想要獲取修改后的數據,ajax請求服務器,做出響應.

復制代碼代碼如下:

grid.on('edit', onEdit, this);  //添加編輯事件,獲取數據 
          function onEdit(e) { 
              alert(e.record.get('name'));  //get()參數是字段名字. 
          } 

gridpanel中的checkbox列根據數據庫值來初始化是否被選

復制代碼代碼如下:

listeners: { 
load: function(store) { 
var index = 0; 
store.each(function(record) { 
if(record.data.column_name == '1') { //column_name 替換成你的列名， '1' 替換成你的值 
grid.selModel.selectRow(index,true); 
} 
index++; 
}) 
} 
}