Как работать с treecombo в Extjs 4.1

Я нашел репетитора в http://www.sencha.com/forum/showthread.php?198856-Ext.ux.TreeCombo
Я пытаюсь создать древовидную комбинацию в Extjs4.1 в http://jsfiddle.net/rq2ha/ вот мой код

Ext.onReady(function() {
        Ext.create('Ext.ux.TreeCombo', {
            margin:10,
            width:120,
            height: 10,
            treeHeight: 10,
            treeWidth: 240,
            renderTo: 'treecombo3',
            store: storeMenu,
            selectChildren: false,
            canSelectFolders: true
            ,itemTreeClick: function(view, record, item, index, e, eOpts, treeCombo)
            { 
                var id = record.data.id;
                // I want to do something here. 
                // But combo do nothing (not selected item or not finish) when i init itemTreeClick function
            }
        });
});

1-я проблема: я хочу получить идентификатор дерева и что-то сделать, когда я нажимаю элемент дерева в комбо. Но комбо не завершено (выбрано), когда я нажимаю (комбо ничего не делает). введите здесь описание изображения

2-я проблема: если я меняю магазин, он динамичен, например

var treestore = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'example.php',
            reader: {
                type: 'json'
            }
        },
        autoload: true
    });

я получу ошибку

введите здесь описание изображения

мой json

[ { id : '1' , text : 'a', iconCls: 'cls1' ,children :[{ id : '2' , text : 'b', iconCls: 'cls2' ,children :[{ id : '9' , text : 'a', iconCls: 'cls' ,children :[]},{ id : '14' , text : 'a', iconCls: 'c' ,children :[{ id : '33' , text : 'b', iconCls: 'cls' ,children :[{ id : '35' , text : 'a', iconCls: 'cls' ,children :[{ id : '36' , text : 'a', iconCls: 'cls' ,children :[]}]}]}]},{ id : '16' , text : 'd', iconCls: 'cls' ,leaf:true}]},...


Как я могу исправить это спасибо


combobox tree extjs extjs4.1
person DeLe    schedule 18.07.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Чтобы решить вашу вторую проблему, вам нужно указать корневой узел при создании хранилища дерева.

var treestore = Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root',
            id: '0'
        },
        proxy: {
            type: 'ajax',
            url: 'example.php',
            reader: {
                type: 'json'
            }
        },
        autoload: true
    });

Кроме того, я должен упомянуть, что имя переменной, которое вы использовали для хранилища дерева в примере с jsfiddle, — storeMenu, а не treestore. Поэтому, если вы хотите заменить хранилище статического дерева версией ajax, убедитесь, что вы используете правильное имя переменной.

person James Holderness    schedule 21.07.2013

arrow_upward
1
arrow_downward

Заменять

// I want to do something here.

со следующими двумя строками:

this.setValue(id);
this.collapse();
person dbrin    schedule 18.07.2013
comment
Вы знаете о моей второй проблеме :) - person DeLe; 19.07.2013

arrow_upward
1
arrow_downward

Что касается вашей первой проблемы, пытаясь использовать метод itemTreeClick непосредственно в вашем экземпляре TreeCombo, вы переопределяете это поведение из класса Ext.ux.TreeCombo. Этот метод отвечает за фактическую установку вашего выбора в комбо. Вот почему сейчас ничего не происходит (такое поведение имеет приоритет).

Если вы хотите что-то сделать с выбором после заполнения комбинации, удалите метод itemTreeClick из своего экземпляра и поместите прослушиватель itemclick. Взгляните на следующий фрагмент:

    Ext.create('Ext.ux.TreeCombo', {
        margin:10,
        width:120,
        height: 10,
        treeHeight: 10,
        treeWidth: 240,
        renderTo: 'treecombo3',
        store: storeMenu,
        selectChildren: false,
        canSelectFolders: true,
        listeners : {
            itemclick : function(view, record, item, index, e, eOpts){
                var id = record.data.id
                //now you can do something here...
            }
        }
    });

ОБНОВИТЬ:

Вот скрипка, работающая с использованием приведенного выше ответа:

http://jsfiddle.net/txaa0kw6/

person Juan Daniel Flores    schedule 21.07.2013