以下代码包含手风琴布局中的网格。面对网格的一列中的组合框中的问题。
在这个小例子中，我已经向中心面板添加了id，然后在菜单项的处理函数中使用此代码来显示更新。
Ext.Loader.setConfig({
enabled: true
});
var combStore = [];
combStore.push([0,"data1"]) ;
combStore.push([1,"data2"]) ;
combStore.push([3,"data3"]) ;
combStore.push([4,"data4"]) ;
var data = [
{string :"sdsdsds" ,number : 0 , comb:0},
{string :"retee" ,number : 1, comb:1},
{string :"klnknk" ,number : 2, comb:4}
] ;
Ext.application({
name: 'MyApp',
launch: function() {
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
'string',
'number',
'comb'
]
});
var store = Ext.create('Ext.data.Store', {
autoDestroy: true,
model:'myModel',
proxy: {
type: 'memory'
},
data: data
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var userCombo = new Ext.form.ComboBox({
store: combStore
});
Ext.util.Format.comboRenderer = function(combo) {
return function(value) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField)
: combo.valueNotFoundText;
}
};
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 600,
height: 600,
defaults: {
bodyStyle: 'padding:15px'
},
layout: {
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
store: store,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
} ,
{
xtype: 'actioncolumn',
text: 'comments' ,
items: [{
icon: 'images/abc.jpg', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
id:'commentWindow',
width: 400,
layout: 'fit',
items: {
xtype: 'form',
frame: true,
items: [
{fieldLabel: 'Comments' ,
name:'commentLabel'
},
{fieldLabel: 'Comments',
xtype: 'textareafield',
name: 'textfield1',
value: 'Text field value' ,
flex:2
}
],
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
} ,
buttons: [{
text: 'submit' ,
handler: function(){
alert('submitted');
Ext.getCmp('commentWindow').close();
}
},{
text: 'Cancel' ,
handler: function(){
Ext.getCmp('commentWindow').close();
}
}]
}).show();
}
}]
} ]
} ,{
xtype: 'tabpanel',
title: 'Tb Grid Panel',
id:'tabbedPanel' ,
items: [ {
xtype: 'gridpanel',
id:'keyM',
title: 'My Grid Panel',
plugins: [
rowEditing
],
store: store,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}, {
xtype: 'gridcolumn',
dataIndex: 'comb',
text: 'ComboData',
renderer: Ext.util.Format.comboRenderer(userCombo)
, editor : {
id:'cc',
xtype:'combobox',
store: combStore
}
}]
} ,{
title: 'Ajax Tab 1',
html: '<div>Hello World</div>'
},{
title: 'Ajax Tab 2',
html: '<div>Hello World</div>'
},{
title: 'Event Tab',
listeners: {
activate: function(tab){
setTimeout(function() {
alert(tab.title + ' was activated.');
}, 1);
}
},
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled: true,
html: "Can't see me cause I'm disabled"
}
]
}
],
renderTo:document.body
});
var map = new Ext.util.KeyMap({
target: "keyM",
binding: [{key: "c", // or Ext.EventObject.ENTER
ctrl:true,
shift:false ,
fn: function(){ alert('Control + shift + tab was pressed.'); },
scope: this
}]
});
}
});
对于网格列中的组合框， 它需要创建一个实例， 一个用于渲染器，另一个用于编辑器。任何人都可以建议我这种方法是否正确？