День добрый народ. Если есть тут гуру по ExtJS подскажите начинающему юзеру.
Искал по форуму свой вопрос, но так и не набрёл на нужную ветку видимо. Встречал подобные решения для полей формы, но так и не понял как их доделать на грид.
Ситуация такая:
Пытаюсь вставить поле типа combobox в grid. В combo загружаю набор данных, указываю valueField, displayField. В колонке грида где поле combo указываю dataIndex. И грид мне показывает то что определено под полем dataIndex в хранилище грида, а я хочу добиться отображения displayField комбобокса.
Вот код. Пример взят с сайта ExtJS и немного переделан
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);
Ext.onReady(function() {
// Создаём combobox для вложенных наборов данных
Ext.define('MyCombo',{
extend: 'Ext.form.field.ComboBox',
alias: 'widget.mycombo',
setValue: function(v) {
this.superclass.setValue.call(this,v);
}
});
function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
};
Ext.define('PlantType', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_type', type: 'int'},
{name: 'description', type: 'string'}
]
});
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'id_type'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
});
var types = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
model: 'PlantType',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plant_types.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant_type'
}
}
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
// manually trigger the data store load
store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
// manually trigger the data store load
types.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Types Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
field: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'id_type',
width: 130,
field: {
xtype: 'mycombo',
queryMode: 'local',
triggerAction: 'all',
store: types,
valueField: 'id_type',
displayField: 'description'
}
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
field: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
field: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
}],
selModel: {
selType: 'cellmodel'
},
renderTo: 'editor-grid',
width: 700,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text: 'Add Plant',
handler : function(){
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
}, 'Plant');
store.insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
}
}],
plugins: [cellEditing]
});
});
