使用Ext JS时,如果rootVisible为false,则无法按字母顺序对子节点进行排序

时间:2018-02-17 00:12:18

标签: javascript extjs

我尝试使用分拣机,父节点已排序,但在扩展父节点时无法对子节点进行排序。有人可以帮我解决一下我在这里缺少的东西吗? 最初在加载时,父母不会扩展。

enter image description here

到目前为止我尝试过:

initComponent: function(){
    Ext.apply(this, {
        events: {

            e_storeLoaded: true
        },
        height: 280,
        rootVisible: false,
        store: Ext.create('Ext.data.TreeStore', {
            rootProperty: {
                leaf: true
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json'
             },
             sorters: [{
                property: 'id',
                direction: 'ASC'
            }]
        }),
        title: this.pages
    });
    this.m_registerLocalEventListeners();
},

m_registerLocalEventListeners: function(){
    this.store.on('nodebeforeexpand', this.m_beforeNodeExpand, this);
},

m_beforeNodeExpand: function(node){
    var rootNode = node.get('root');
    if (!rootNode) {
     //do something
    }
},

1 个答案:

答案 0 :(得分:0)

<强>解决方案:

使用Ext.data.TreeStore.sort()。 这个例子没有使用你的方法,但是对我有用,我可以对节点进行排序。

测试环境:

Ext JS 4.2

目录结构:

root/
root/ext/
root/test/

工作示例(test.html):

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.FocusManager.enable();

        Ext.define('model', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'id', type: 'number'},
                {name: 'text', type: 'string'}
            ]
        });

        Ext.define('Trnd.TestWindow', {
            extend: 'Ext.window.Window',

            closeAction: 'destroy',
            border: false,
            width: 560,
            height: 500,
            modal: true,
            closable: true,
            resizable: false,
            layout: 'fit',

            initComponent: function() {
                var me = this;
                me.callParent(arguments);

                me.button = Ext.create('Ext.button.Button', {
                    text: 'Sort',
                    handler : function(btn) {
                        var me = btn.up('window');

                        me.store.sort('text', 'ASC')
                        me.tree.expand();
                    }   
                }); 

                me.store = new Ext.data.TreeStore({
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json'
                        }
                    },
                    model: 'model'
                });

                me.tree = new Ext.tree.Panel({
                    useArrows: true,
                    autoScroll: true,
                    animate: true,
                    enableDD: false,
                    width: '100%',
                    flex: 1,
                    border: false,
                    rootVisible: false,
                    allowChildren: true,
                    store: me.store,
                    root: {
                        expanded: true,
                        text: 'Ext JS',
                        draggable: false,
                        id: 'root'
                    },
                    tbar: [
                        me.button
                    ]
                });

                me.add(me.tree);

                var rootnode = me.tree.getRootNode();

                var parent1node = rootnode.appendChild({
                    text: 'Parent1',
                    leaf: false
                });
                parent1node.appendChild({
                    text: '_xyz',
                    leaf: true
                });
                parent1node.appendChild({
                    text: '_abc',
                    leaf: true
                });
                parent1node.appendChild({
                    text: '_pqr',
                    leaf: true
                });

                var parent2node = rootnode.appendChild({
                    text: 'Parent2',
                    leaf: false
                });
                parent2node.appendChild({
                    text: '_b',
                    leaf: true
                });
                parent2node.appendChild({
                    text: '_c',
                    leaf: true
                });
                parent2node.appendChild({
                    text: '_a',
                    leaf: true
                });

                var parent3node = rootnode.appendChild({
                    text: 'Parent2',
                    leaf: false
                });

            }
        }); 

        var win = new Trnd.TestWindow({

        });
        win.show();

    });
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>