Quote Originally Posted by batman3000 View Post
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);
            }
        };
    }