Looks like we can't reproduce the issue or there's a problem in the test case provided.
-
Sencha User

Originally Posted by
batman3000
If this is so "simple", then how do you add a grid/tree panel as picker that properly handles key events?
Just overriding createPicker() results in a grid panel whose rows can only be selected with the mouse
I hope that fixed it in correct way )
few hours of trying, it is first time for me, that i am getting so deep in Ext
we need to add overriding of 'onExpand', but i realy don't know what in that method is important, so i add there all i found in ComboBox.js and other component that i use Ext.ux.form.field.BoxSelect but now it works for me, if some one can correct my code, would be nice )
Code:
onExpand: function() {
var me = this,
keyNav = me.listKeyNav,
selectOnTab = me.selectOnTab,
picker = me.getPicker();
// Handle BoundList navigation from the input field. Insert a tab listener specially to enable selectOnTab.
keyNav = me.listKeyNav = keyNav = new Ext.util.KeyNav(this.inputEl, {
scope: picker,
up: function() {
if(this.coursorPosition == null || this.coursorPosition == 0){
this.coursorPosition = this.getStore().count()-1;
}
this.coursorPosition = this.coursorPosition-1;
var selModel = this.getSelectionModel();
selModel.select(this.coursorPosition);
this.getView().getNode(this.coursorPosition).scrollIntoView();
},
down: function() {
if(this.coursorPosition == null || this.coursorPosition == this.getStore().count()-1){
this.coursorPosition = 0;
}
this.coursorPosition = this.coursorPosition+1;
var selModel = this.getSelectionModel();
selModel.select(this.coursorPosition);
this.getView().getNode(this.coursorPosition).scrollIntoView();
}
});
// While list is expanded, stop tab monitoring from Ext.form.field.Trigger so it doesn't short-circuit selectOnTab
if (selectOnTab) {
me.ignoreMonitorTab = true;
}
Ext.defer(keyNav.enable, 1, keyNav); //wait a bit so it doesn't react to the down arrow opening the picker
me.inputEl.focus();
if (keyNav || !me.filterPickList) {
return;
}
keyNav = me.listKeyNav;
keyNav.highlightAt = function(index) {
var boundList = this.boundList,
item = boundList.all.item(index),
len = boundList.all.getCount(),
direction;
if (item && item.hasCls('x-boundlist-selected')) {
if ((index == 0) || !boundList.highlightedItem || (boundList.indexOf(boundList.highlightedItem) < index)) {
direction = 1;
} else {
direction = -1;
}
do {
index = index + direction;
item = boundList.all.item(index);
} while ((index > 0) && (index < len) && item.hasCls('x-boundlist-selected'));
if (item.hasCls('x-boundlist-selected')) {
return;
}
}
if (item) {
item = item.dom;
boundList.highlightItem(item);
boundList.getTargetEl().scrollChildIntoView(item, false);
}
};
}
-
Sencha User
I have implemented this code but when i am starting to write in combo i get error like 'Uncaught TypeError: Object [object Object] has no method 'refresh 'I am using Extjs 4.1.3 mvc..
What to do now??
-
Sencha User
For what it's worth, I've gone with my own implementation of this concept. I've put the code on GitHub, and made some examples visible online.