1

ツリー グリッドのルートが二重に表示されます。[スクリーンショットのように] この場合、DRIVEがルートになり、表示されるようにします。

誰かが私を助けてくれたら嬉しいです。

前もって感謝します..

ここに画像の説明を入力


これが私のツリービューの定義です:

Ext.define(appName + '.view.document.FolderTree', {    
    extend        : 'Ext.tree.Panel',
    alias        : 'widget.foldertree',
    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.tree.plugin.TreeViewDragDrop',
        'Ext.grid.column.Action'
    ],
    title       : 'Folders',
    iconCls     : 'icon-folder',
    store       : 'FoldersTreeStore',
    rootVisible : false,
    folderSort  : true,
    animate        : true,
    autoScroll    : true,
    hideHeaders : true,
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            dragText: 'Drag to reorder',
            ddGroup: 'task'
        }
    },
    initComponent: function() {
        var me = this;


        me.plugins = [me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing')];


        me.columns = [
            {
                xtype: 'treecolumn',
                dataIndex: 'folderName',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true,
                    validator: function(value){
                        value = Ext.String.trim(value);
                        return value.length < 1 ? this.blankText : true;
                    }
                }
            },
            {
                xtype: 'actioncolumn',
                width: 24,
//                icon: 'resources/images/cross-script.png',
//                iconCls: 'x-hidden',
                iconCls: 'icon-close',
                tooltip: 'Delete'
            }
        ];


        this.btnCreateFolder = Ext.create('Ext.button.Button', {
            iconCls    : 'icon-new-folder',
            tooltip    : '<b>Create new folder</b>',
            action    : 'create-folder'
        });


        this.btnDeleteFolder = Ext.create('Ext.button.Button', {
            iconCls    : 'icon-delete-folder',
            tooltip    : '<b>Delete folder</b>',
            action    : 'delete-folder',
            disabled: true
        });


        this.dockedItems = [{
            xtype    : 'toolbar',
            dock     : 'bottom',
            items    : [ me.btnCreateFolder, '-', me.btnDeleteFolder ]
        }];


        me.callParent(arguments);
    }
});

ツリーストア:

Ext.define(appName + '.store.FoldersTreeStore', {    
    extend        : 'Ext.data.TreeStore',
    model        : appName + '.model.Folder',
    autoLoad    : false,
    autoSync    : false,
    proxy        : {
        type    : 'ajax',
        api        : {
            read    : 'folder/load.ajax',
            create    : 'folder/saveOrUpdate.ajax',
            update    : 'folder/saveOrUpdate.ajax',
            destroy    : 'folder/delete.ajax'
        },
        reader    : {
            type    : 'json',
            root    : 'data',
            successProperty : 'success',
            totalProperty    : 'totalCount'
        },
        writer    : {
            type    : 'json',
            writeAllFields : true,
            encode    : true,
            root    : 'data'
        },
        listeners: {
            exception: function(proxy, response, operation){
                Ext.MessageBox.show({
                    title: 'REMOTE EXCEPTION',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    },
    sorters: [
        {
            property : 'order',
            direction: 'ASC'
        }
    ]
});

サーバーから取得したデータ:

{    "data": {
        "leaf": false,
        "folderId": 1,
        "order": 1,
        "expanded": true,
        "iconCls": "icon-drive",
        "folderName": "DRIVE",
        "data": [{
            "folderId": 2,
            "folderName": "ggg",
            "order": 2,
            "leaf": true,
            "iconCls": "icon-folder"
        }]
    },
    "success": true,
    "totalCount": 1
}
4

0 に答える 0