比如，如果一个combo选了第一项，就把同一行的另外一个组件变成datefield，如果选了第二项，就把那个组件变成textfield。
API里说是用setEditor，但参数写的是field。
我这样写的话：
[code="java"] Ext.getCmp('quote_item_grid').columns[0].setEditor(new Ext.form.field.Text({value: 3}));[/code]
报错：column.getEditor is not a function
有好多这样问的，都说用setEditor，但好像都是3.3的，4.0是不是不一样了呢？
有人说在前面加一个参数columnNumber，我试了貌似也不行，报同样的错……
你发的那个网站，我没用明白 :oops: ，没找到怎么引入ext的样式文件。
[url]%EXT_HOME%\ext-4.0.2-gpl\ext-4.0.2\examples\grid\array-grid.js[/url]在你的ext的包下面这个路径的这个文件内容换成我这个，然后你浏览array-grid.html看看。
[code="java"]
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"}
//...
]
});
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
editor:{xtype:'combo',
store: states,
displayField: 'name',
valueField: 'abbr',
listeners:{
'change':function(ts){
var text =this.value;
if(text=='AL'){
Ext.getCmp('dg').setEditor(new Ext.form.field.Text());
}
if(text=='AK'){
Ext.getCmp('dg').setEditor(new Ext.form.field.Date());
}
}
}
}
},
{
id:'dg',
text : 'Price',
width : 75,
sortable : true,
dataIndex: 'price',
editor:{xtype:'numberfield'}
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Hold stock';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
}
}]
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
[/code]
这个做的是第一列的editor是个combo，选第一项的话，第二列的editor为文本，选第二项，第二列的editor为日期。
你的这个columns选错了吧，
应该是改变某一列的editor，比如这样：
[code="java"]{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
editor:{xtype:'numberfield'}
},
{
id:'dg',
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
editor:{xtype:'numberfield'}
}[/code]
现在有2列，editor都是数字输入框。在第一个editor被编辑时触发事件，在事件中改变第二个editor的类型为文本输入框。
[code="java"]plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners:{
'edit':function(e,s){
if(s.field=="company"){
alert(1);
Ext.getCmp('dg').setEditor(new Ext.form.field.Text({value: 3}));
}
}
}
})
][/code]
具体的这个edit事件传进来的参数[color=red]e,s[/color]你可以查一下API中Ext.grid.plugin.CellEditing这个类的edit事件。就不一一列举了。
这里没有按照你的要求根据comboBox的选项来改变editor的类型，正好你自己练习下哈 :idea:
[code="java"]
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
editor:{xtype:'combo',
store: states,
displayField: 'name',
valueField: 'abbr',
listeners:{
'change':function(ts){
var text =this.value;
if(text=='AL'){
Ext.getCmp('dg').setEditor(new Ext.form.field.Text({value: 3}));
Ext.getCmp('dg').removeListener('edit');
}
if(text=='AK'){
Ext.getCmp('dg').setEditor(new Ext.form.field.Date());
}
}
}
}
},
{
id:'dg',
text : 'Price',
width : 75,
sortable : true,
dataIndex: 'price',
editor:{xtype:'numberfield'}
}
[/code]
在combo的edit事件中改变列的editor。现在存在个问题，如果这个id为dg的列开始不是日期类型，那么editor改变为日期类型，我不知道该怎么给它格式化。。。
[code="java"]Ext.getCmp('dg').removeListener('edit'); [/code]
这句话不要。。。
图片怎么上传啊。。 :oops: 是要上传到网上图片库在给链接么。
[img]C:\Users\lenovo\Desktop\未命名.jpg[/img]
[img]C:\Users\lenovo\Desktop\未命名1.jpg[/img]
[code="java"]Ext.getCmp('dg').setEditor(new Ext.form.field.Text({value:4}));[/code]这个文本给个值。。
我发的图片能看到么？日历的效果出来了么？