需求:要实现一个grid ,里面 columns 是动态的,columns 的类型(Xtype) 也是动态的, 也就是,一个列表,展示属性是动态的,展示类型也是动态的,如果展示类型是COMBOX 类型的,值也会从后台取... 我刚开始接触EXT,实现这种功能真是很头疼, 现在项目用EXT4.3 ,估计现在用的人不多,有没有用EXT3 或者 其他版本做过这种功能的。。看下面的代码,columns的动态展现,可以先不管,一个grid展现后,我点击一个cell编辑,首先判断这一列是什么编辑类型(textfield or combox),如果是combox,这从数据库取值(store),让其选择,不知道我有没有描述清楚哦,如果不用ext ,我是可以实现的,哎请求高手赐教。。 下面是我的静态代码:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
});
var optsvr_grid = new Ext.grid.GridPanel({
title:"OPT/SVR Marketing Attributes Management",
height:400,
collapsible:true,
columnLines: true,
plugins: [cellEditing],
// renderTo: Ext.get('optsvr'),
store: store,
multiSelect: true,
selModel: {
selType: 'cellmodel'
},
viewConfig: {
emptyText: 'No data to display'
},
tbar : [save_btn,'-',copy_btn,'-',paste_btn],
bbar : new Ext.PagingToolbar({
store : store,
pageSize:10,
displayInfo : true,
displayMsg : 'Displaying topics {0} - {1} of {2}',
emptyMsg : "no data"
}),
columns: [new Ext.grid.RowNumberer(),
{
text: 'OPT/SVR Number',
flex: 15,
align: 'right',
dataIndex: 'optsrvnumber',
field: {
allowBlank: false
} },{
text: 'Description',
flex: 20,
align: 'right',
dataIndex: 'description',
field: {
allowBlank: false
}
},{
text: 'Status',
dataIndex: 'status',
align: 'name',
align: 'right',
flex: 20,
field: {
xtype: 'combobox',
// typeAhead: true,
triggerAction: 'all',
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
editable : false,
lazyRender: true,
listClass: 'x-combo-list-small'
} },{
text: 'Version',
dataIndex: 'version',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
},{
text: 'Last Modify',
dataIndex: 'lastmodify',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
},{
text: 'Last Modfy By',
dataIndex: 'lastmodifyby',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
},{
text: 'Create Order Date',
dataIndex: 'createorderdate',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
}]
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
});
var optsvr_grid = new Ext.grid.GridPanel({
title:"OPT/SVR Marketing Attributes Management",
height:400,
collapsible:true,
columnLines: true,
plugins: [cellEditing],
// renderTo: Ext.get('optsvr'),
store: store,
multiSelect: true,
selModel: {
selType: 'cellmodel'
},
viewConfig: {
emptyText: 'No data to display'
},
tbar : [save_btn,'-',copy_btn,'-',paste_btn],
bbar : new Ext.PagingToolbar({
store : store,
pageSize:10,
displayInfo : true,
displayMsg : 'Displaying topics {0} - {1} of {2}',
emptyMsg : "no data"
}),
columns: [new Ext.grid.RowNumberer(),
{
text: 'OPT/SVR Number',
flex: 15,
align: 'right',
dataIndex: 'optsrvnumber',
field: {
allowBlank: false
} },{
text: 'Description',
flex: 20,
align: 'right',
dataIndex: 'description',
field: {
allowBlank: false
}
},{
text: 'Status',
dataIndex: 'status',
align: 'name',
align: 'right',
flex: 20,
field: {
xtype: 'combobox',
// typeAhead: true,
triggerAction: 'all',
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
editable : false,
lazyRender: true,
listClass: 'x-combo-list-small'
} },{
text: 'Version',
dataIndex: 'version',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
},{
text: 'Last Modify',
dataIndex: 'lastmodify',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
},{
text: 'Last Modfy By',
dataIndex: 'lastmodifyby',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
},{
text: 'Create Order Date',
dataIndex: 'createorderdate',
align: 'right',
flex: 20 ,
field: {
allowBlank: true
}
}]
});
Ext.Ajax.request({url:"",success:function(res,opt){
var column=[];
var record=[];}})