|
一、grid的例:
Javascript代碼 
- //配置表格列
- {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數(shù)字列
- format:'0,000'//數(shù)字格式化字符串
- }
//配置表格列
{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數(shù)字列
format:'0,000'//數(shù)字格式化字符串
}
Javascript代碼 
- xtype: 'actioncolumn',//Ext.grid.column.Action動作列
- items: [{
- icon: 'images/edit.gif',//指定編輯圖標資源的URL
- handler: function(grid, rowIndex, colIndex) {
- //獲取被操作的數(shù)據(jù)記錄
- 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'));
- }
- }]
xtype: 'actioncolumn',//Ext.grid.column.Action動作列
items: [{
icon: 'images/edit.gif',//指定編輯圖標資源的URL
handler: function(grid, rowIndex, colIndex) {
//獲取被操作的數(shù)據(jù)記錄
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'));
}
}]
Javascript代碼 
- {
- header: "描述", width: 100,
- xtype: 'templatecolumn',//Ext.grid.column.Template數(shù)字列
- tpl : '{name}<tpl if="leader == false">不</tpl>是組長'
- }
{
header: "描述", width: 100,
xtype: 'templatecolumn',//Ext.grid.column.Template數(shù)字列
tpl : '{name}<tpl if="leader == false">不</tpl>是組長'
}
Javascript代碼 
- Ext.create('Ext.grid.RowNumberer',{text : '行號', width : 35})
Ext.create('Ext.grid.RowNumberer',{text : '行號', width : 35})
二、自定義渲染函數(shù)示例:
Javascript代碼 
- //定義渲染函數(shù),格式化性別顯示
- function formatSex(value){
- return value=='man'?'男':'<font color=red>女</font>';
- }
- //定義渲染函數(shù),格式化年齡顯示
- function formatAge(value,metadata){
- if(value < 30){ //年齡小于30的設置背景顏色為#CCFFFF
- metadata.style = 'background-color:#CCFFFF;';
- }
- return value;
- }
//定義渲染函數(shù),格式化性別顯示
function formatSex(value){
return value=='man'?'男':'<font color=red>女</font>';
}
//定義渲染函數(shù),格式化年齡顯示
function formatAge(value,metadata){
if(value < 30){ //年齡小于30的設置背景顏色為#CCFFFF
metadata.style = 'background-color:#CCFFFF;';
}
return value;
}
Javascript代碼 
- 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}
- ]
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(單元格選擇模式)示例
Javascript代碼 
- //創(chuàng)建表格數(shù)據(jù)
- var datas = [
- [100,'張三',24], [200,'李四',30], [300,'王五',29]
- ];
- //創(chuàng)建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: {//配置數(shù)據(jù)源
- fields: ['id','name','age'],//定義字段
- proxy: {
- type: 'memory',//Ext.data.proxy.Memory內(nèi)存代理
- data : datas,//讀取內(nèi)嵌數(shù)據(jù)
- 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}
- ]
- });
//創(chuàng)建表格數(shù)據(jù)
var datas = [
[100,'張三',24], [200,'李四',30], [300,'王五',29]
];
//創(chuàng)建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: {//配置數(shù)據(jù)源
fields: ['id','name','age'],//定義字段
proxy: {
type: 'memory',//Ext.data.proxy.Memory內(nèi)存代理
data : datas,//讀取內(nèi)嵌數(shù)據(jù)
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(行選擇模式)示例--主要相關(guān)代碼
Javascript代碼 
- 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);
- }
- }]
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(復選框選擇模式)示例--關(guān)鍵代碼
Javascript代碼 
- //注冊復選框選擇模式別名為selection.checkboxmodel
- Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
//注冊復選框選擇模式別名為selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
Javascript代碼 
- 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);
- }
- }]
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示例--關(guān)鍵代碼
Javascript代碼 
- features: [Ext.create('Ext.grid.feature.RowBody',{
- getAdditionalData: function(data, idx, record, orig) {
- var headerCt = this.view.headerCt,
- colspan = headerCt.getColumnCount();//獲取表格的列數(shù)
-
- return {
- rowBody: record.get('introduce'),//指定行體內(nèi)容
- rowBodyCls: 'rowbodyColor',//指定行體樣式
- rowBodyColspan: colspan//指定行體跨列的列數(shù)
- };
- }
- })]
features: [Ext.create('Ext.grid.feature.RowBody',{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();//獲取表格的列數(shù)
return {
rowBody: record.get('introduce'),//指定行體內(nèi)容
rowBodyCls: 'rowbodyColor',//指定行體樣式
rowBodyColspan: colspan//指定行體跨列的列數(shù)
};
}
})]
Ext.grid.feature.Summary示例--關(guān)鍵代碼
Javascript代碼 
- features: [{
- ftype: 'summary'//Ext.grid.feature.Summary表格匯總特性
- }],
- columns: [//配置表格列
- {header: "姓名", flex: 1, dataIndex: 'name',
- summaryType: 'count',//求數(shù)量
- summaryRenderer: function(value){
- return '員工總數(shù):'+value
- }
- },
- {header: "薪資", flex: 1, dataIndex: 'salary',
- summaryType: 'average',//求平均值
- summaryRenderer: function(value){
- return '平均薪資:'+value
- }
- }
- ]
features: [{
ftype: 'summary'//Ext.grid.feature.Summary表格匯總特性
}],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name',
summaryType: 'count',//求數(shù)量
summaryRenderer: function(value){
return '員工總數(shù):'+value
}
},
{header: "薪資", flex: 1, dataIndex: 'salary',
summaryType: 'average',//求平均值
summaryRenderer: function(value){
return '平均薪資:'+value
}
}
]
Ext.grid.feature.Grouping示例--關(guān)鍵代碼
Javascript代碼 
- 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'}
- ]
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示例--關(guān)鍵代碼
Javascript代碼 
- features: [Ext.create('Ext.grid.feature.GroupingSummary', {
- groupByText : '用本字段分組',
- showGroupsText : '顯示分組',
- groupHeaderTpl: '性別: {name} ({rows.length})', //分組標題模版
- startCollapsed: true //設置初始分組是否收起
- })],
- columns: [//配置表格列
- {header: "姓名", width: 100, dataIndex: 'name',
- summaryType: 'count',//求數(shù)量
- summaryRenderer: function(value){
- return '員工總數(shù):'+value
- }
- },
- {header: "性別", width: 50, dataIndex: 'sex'},
- {header: "年齡", width: 110, dataIndex: 'age',
- summaryType: 'average',//求數(shù)量
- summaryRenderer: function(value){
- return '平均年齡:'+value
- }
- }
- ]
features: [Ext.create('Ext.grid.feature.GroupingSummary', {
groupByText : '用本字段分組',
showGroupsText : '顯示分組',
groupHeaderTpl: '性別: {name} ({rows.length})', //分組標題模版
startCollapsed: true //設置初始分組是否收起
})],
columns: [//配置表格列
{header: "姓名", width: 100, dataIndex: 'name',
summaryType: 'count',//求數(shù)量
summaryRenderer: function(value){
return '員工總數(shù):'+value
}
},
{header: "性別", width: 50, dataIndex: 'sex'},
{header: "年齡", width: 110, dataIndex: 'age',
summaryType: 'average',//求數(shù)量
summaryRenderer: function(value){
return '平均年齡:'+value
}
}
]
七、Ext.grid.plugin.CellEditing示例--關(guān)鍵代碼
Javascript代碼 
- plugins: [
- Ext.create('Ext.grid.plugin.CellEditing', {
- clicksToEdit: 1//設置鼠標單擊1次進入編輯狀態(tài)
- })
- ],
- 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數(shù)字列
- format:'0,000',//數(shù)字格式化字符串
- editor: {//數(shù)字字段
- xtype:'numberfield',
- allowBlank:false
- }
- }
- ]
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1//設置鼠標單擊1次進入編輯狀態(tài)
})
],
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數(shù)字列
format:'0,000',//數(shù)字格式化字符串
editor: {//數(shù)字字段
xtype:'numberfield',
allowBlank:false
}
}
]
八、Ext.grid.plugin.RowEditing示例--關(guān)鍵代碼
Javascript代碼 
- 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數(shù)字列
- format:'0,000',//數(shù)字格式化字符串
- editor: {//數(shù)字字段
- xtype:'numberfield',
- allowBlank:false
- }
- }
- ]
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數(shù)字列
format:'0,000',//數(shù)字格式化字符串
editor: {//數(shù)字字段
xtype:'numberfield',
allowBlank:false
}
}
]
九、Ext.grid.plugin.DragDrop示例--關(guān)鍵代碼
Javascript代碼 
- viewConfig: {
- plugins: [
- //行編輯模式
- Ext.create('Ext.grid.plugin.DragDrop',{
- dragGroup: 'grid1',//拖拽組名稱
- dropGroup: 'grid2'//拖放組名稱
- })
- ]
- }
viewConfig: {
plugins: [
//行編輯模式
Ext.create('Ext.grid.plugin.DragDrop',{
dragGroup: 'grid1',//拖拽組名稱
dropGroup: 'grid2'//拖放組名稱
})
]
}
十、Ext.grid.property.Grid示例
Javascript代碼 
- //創(chuàng)建屬性表格
- 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
- })
- },
- //自定義渲染函數(shù)
- customRenderers: {
- //格式化布爾值顯示
- "是否已婚": function(v){
- return v?'是':'否';
- },
- //格式化日期顯示
- "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
- },
- source: {
- "員工名稱" : "張三",
- "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
- "性別" : '男',
- "是否已婚" : false,
- "年齡" : 29
- }
- });
|
|