У меня есть gridpanel include date и combo column http://jsfiddle.net/YjYqX/
Но я не хочу, чтобы показывать свою комбо. Я хочу показать свою комбо без щелчка, а не скрывать внутри ячейки, например
и то же самое для столбца даты, например
Я думаю, что chage до clicksToEdit: 0, но не работает
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
Как это сделать, спасибо
Единственный способ добиться этого в 4.2x или ниже - использовать пользовательский компонент, такой как столбец com-en Skirtle http://skirtlesden.com/ux/component-column. Этот тип столбца позволит вам вставлять произвольные компонентов в ячейку.
Предстоящая версия ExtJS будет иметь нечто вроде Gadget Grid, что позволит использовать аналогичные функции.
Комбобокс или датапикер вводятся только после нажатия на ячейку, они просто не существуют в сетке перед щелчком. Способ изменения внешнего вида ячейки заключается в использовании рендерера в столбце. Таким образом, вы можете добавить фальшивый триггеры в качестве фонового изображения или что-то в этом роде.
В ответ на ваш комментарий, вот как вы могли это сделать:
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdCls = 'fake-combo';
return value;
},
text: 'MyColumn8',
editor: {
xtype: 'combobox',
store: ...
}
}
Изучите docs для всех параметров рендеринга. Существуют различные классы, которые вы можете указать, и атрибуты, которые будут использоваться DomHelper. Класс css может иметь фоновое изображение, но вы должны поэкспериментировать здесь. Нелегко получить согласованный макет с тем, что вы хотите сделать, но у вас есть полный доступ к div, который отображается в ячейке. Обязательно проверяйте результаты с помощью Firebug или Chrome Dev Tools, он покажет вам, что именно происходит.
Хотя вы можете скриншот combobox и установить его как фоновое изображение. Но лучше не пытайтесь создать combobox в рендерере, это не то, как это работает. Наличие реального combobox для каждой строки является обычным и может повлиять на производительность, если у вас много строк.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns:
[
{
header: 'Category',
dataIndex: 'CategoryName',
editor:
{
xtype: 'combobox',
store: 'categoryStore',
displayField: 'CategoryName',
valueField: 'CategoryID'
}
}
],
width: 450,
renderTo: Ext.getElementById('hede')
});
Попробуйте эту ссылку..
http://docs.sencha.com/extjs/5.0/components/grids/widgets_widgets_columns.html
Это от Extjs 5.
Update:
{
xtype: 'widgetcolumn',
text: 'Progress',
width: 120,
widget: {
xtype: 'combobox'
}
}
Это работало как шарм.
Хорошо, вот полный пример использования Combo Boxes в Sencha EXTJS:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns:
[
{
xtype: 'gridcolumn',
text: 'UserStatus',
dataIndex: 'userstatus',
editor: {
xtype: 'combobox',
allowBlank: false,
displayField:'Name',
valueField:'Id',
queryMode:'local',
store: this.getStatusChoicesStore()
}
}
],
width: 450,
renderTo: Ext.getElementById('hede')
});
Теперь функция this.getStatusChoicesStore() предоставит нам выбор для этого комбинированного блока (вы можете определить эту функцию в любом месте или просто встроить ее в определение столбцов, для меня это упрощается читать, если я создаю для него функцию):
getStatusChoicesStore : function() {
return Ext.create('Ext.data.Store', {
data : [{Id: 0, Name:"Active"},{Id: 1, Name: "Inactive"}]
});
},
Кроме того, более подробную информацию и примеры можно найти здесь.