Ext Grid的Combo/TextField/Width/Height的问题

最新推荐文章于 2025-05-31 11:34:28 发布

最新推荐文章于 2025-05-31 11:34:28 发布 · 179 阅读

文章标签：

本文介绍了一个使用ExtJS实现的可编辑Grid案例，包括如何设置列宽高、使用ComboBox实现下拉选择，并讨论了显示字段的问题及解决方案。

Ext.onReady(function(){
var fm = Ext.form;

var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: 'indoor',
width: 55
});
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
displayField: ,
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn
]);

cm.defaultSortable = true;

var Plant = Ext.data.Record.create([
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);

var ds = new Ext.data.Store({
url: 'plants.xml',

reader: new Ext.data.XmlReader({
record: 'plant'
}, Plant),

sortInfo:{field:'common', direction:'ASC'}
});

var grid = new Ext.grid.EditorGridPanel({
ds: ds,
cm: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:checkColumn,
clicksToEdit:1,

tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: new Date(),
indoor: false
});
grid.stopEditing();
ds.insert(0, p);
grid.startEditing(0, 0);
}
}]
});

ds.load();
});
这是Ext grid中的可编辑的grid的Demo,
它在设置width/heigth用的是number,在Api中也是这样讲的,大家有用百分比的做法么?
另外在它的Editor中用了ComboBox,下拉选择列表后会把valueField的值显示出来,而不是把displayFiled显示出来,同样的问题存在于textFiled中,当inputType=password时,输入的时候显示为*,但是输入完成后仍然会把原值显示出来,这个问题大家怎么解决呢!