我目前正在extjs可编辑网格上工作。从文档中复制了部分代码,以了解如何正确使用这种类型的网格。这是代码:
Ext.define('GestioneScadenza', {
extend: 'Ext.data.Model',
fields: ['codiceRamo', 'denominazione', {name: 'dataScadenza', type: 'date', dateFormat: 'd/m/Y'} ]
});
var gestioneScadenzaStore = Ext.create('Ext.data.Store', {
model: 'GestioneScadenza',
data: [
{ codiceRamo: 'Lisa', denominazione: 'lisa@simpsons.com', dataScadenza: '03/03/1999' },
{ codiceRamo: 'Bart', denominazione: 'bart@simpsons.com', dataScadenza: '03/03/1999' },
{ codiceRamo: 'Homer', denominazione: 'homer@simpsons.com', dataScadenza: '03/03/1999' },
{ codiceRamo: 'Marge', denominazione: 'marge@simpsons.com', dataScadenza: '03/03/1999' }
]
});
var gestioneScadenzaGrid = Ext.create('Ext.grid.Panel', {
store: gestioneScadenzaStore,
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
listeners:{
'beforeedit':function(editor){
editor.getEditor().floatingButtons.hide();
}},
columns: [
{
flex: 5,
text: getJsResource('tabRami.label.codiceRamo'),
// width: 200,
dataIndex: 'codiceRamo'
},
{
flex: 2,
text: getJsResource('tabRami.label.denominazione'),
// width: 150,
dataIndex: 'denominazione'
},
{
flex: 3,
text: getJsResource('tabRami.label.dataScadenza'),
xtype: 'datecolumn',
// width: 135,
dataIndex: 'dataScadenza',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'd/m/Y',
maxValue: Ext.Date.format(new Date(), 'd/m/Y')
}
}
]
});
此代码的问题是它仅显示一列!实际上,其他列被推离了页面,我必须滚动很多才能到达网格的尽头。看来问题是弹性。实际上,如果我仅对最后一项输入flex值,它将正确显示列,但最后一项将横向推得很远。
有解决方案吗?