Looks like we can't reproduce the issue or there's a problem in the test case provided.
-
Sencha User
ComboBox using Grid instead of BoundList
It would be nice to use a Grid instead of simple BoundList to render the ComboBox picker. This is currently not possible.
I currently use the following code to implement that feature. Maybe it is possible to integrate that into the standard ComboBox in future releases?
Code:
Ext.define('PVE.form.ComboGrid', {
extend: 'Ext.form.ComboBox',
requires: [
'Ext.grid.Panel'
],
alias: ['widget.PVE.form.ComboGrid'],
// copied from ComboBox
createPicker: function() {
var me = this,
picker,
menuCls = Ext.baseCSSPrefix + 'menu',
opts = Ext.apply({
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
ownerCt: me.ownerCt,
cls: me.el.up('.' + menuCls) ? menuCls : '',
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
pageSize: me.pageSize
}, me.listConfig, me.defaultListConfig);
// NOTE: we simply use a grid panel
//picker = me.picker = Ext.create('Ext.view.BoundList', opts);
picker = me.picker = Ext.create('Ext.grid.Panel', opts);
// hack: pass getNode() to the view
picker.getNode = function() {
picker.getView().getNode(arguments);
};
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});
me.mon(picker.getSelectionModel(), {
selectionChange: me.onListSelectionChange,
scope: me
});
return picker;
}
});
-
Sencha User
how use it??? and can tree in it?? how ?thank you very much
-
Sencha User

Originally Posted by
nailuo
how use it??? and can tree in it?? how ?thank you very much
Just use it like a normal ComboBox - pass grid options in 'listConfig', for example:
Code:
{
xtype: 'PVE.form.ComboGrid',
valueField: 'name',
displayField: 'name',
store: yourstore,
listConfig: {
columns: [
{
header: 'Name',
dataIndex: 'name',
}
]
}
}
-
Sencha User
should post as an extension.
so by this way, combotree is coming
-
Sencha User
how tree in it?????? i try it by your way.... but hava many errors ..............can you help me ,please
-
Sencha User
sorry, I just use the normal grid (no tree).
-
I don't think this is something we'll implement in the core, it's pretty simple to make your own field that extends field.Picker to contain any type of item as the list. The combo contains things specific to just single values.
Twitter - @evantrimboli
Former Sencha framework engineer, available for consulting.
As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.
-
Sencha User
extjs4 added limitations on the variables, with adjustment of the range of roles in
PHP Code:
Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']);
Ext.define("Ext.ux.comboboxtree", {
extend : "Ext.form.field.Picker",
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
// pickerAlign : "tl"//??????
});
self.callParent();
},
createPicker : function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : self.storeUrl
},
sorters : [{
property : 'leaf',
direction : 'ASC'
}, {
property : 'text',
direction : 'ASC'
}]
});
self.picker = new Ext.tree.Panel({
height : 300,
autoScroll : true,
floating : true,
focusOnToFront : false,
shadow : true,
ownerCt : this.ownerCt,
useArrows : true,
store : store,
rootVisible : false
});
self.picker.on({
beforehide : function(p) {
var records = self.picker.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec) {
names.push(rec.get('text'));
});
// Ext.MessageBox.show({
// title : 'Selected Nodes',
// msg : names.join('<br />'),
// icon : Ext.MessageBox.INFO
// });
// alert(names.join(','));
self.setValue(names.join(','));
p.setVisible(true);// ???
}
});
return self.picker;
},
alignPicker : function() {
// override the original method because otherwise the height of
// the treepanel would be always 0
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and
// max width) unless there are no records to display.
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
// add the {openCls}-above class if the picker was
// aligned above
// the field due to hitting the bottom of the viewport
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
}
});
Ext.onReady(function() {
var com = Ext.create("Ext.ux.comboboxtree", {
storeUrl : 'check-nodes.json',
width : 270,
fieldLabel : '????',
labelWidth : 60,
renderTo : 'tree-div'
});
});
-
Sencha Premium Member
Vador

-
Sencha User
This is great stuff. I see that the TreeStore cannot be filtered. Is there any way we could filter the tree view as the user types into the field text box?