a problem about the icon of treenode when using store.load method with node param

[xunxin]

i am using the method TreeStore.load with a node param, and a problem get in the way.

1.png

in the above , i mark the icon before calling the load method. After calling the load method, the icon of the tree node is changed to one as the following image:

2.png

anyone can help me? thanks in advance.

[scottmartin]

Can you please provide a small working example for us to review. This will help speed up the process and make sure we are looking at the same problem.

Regards,
Scott.

[xunxin]

it is my pleasure.

the model:

Ext.define('module.model.Module', {    extend: 'Ext.data.Model',
    fields: [
            {name: 'id', useNull: true, type: 'int'}, 
            {name: 'text'}, 
            {name: 'leaf', useNull: true}, 
                    {name: 'enable', useNull: true},
                    {name: 'parentId', useNull: true}, 


            ]
});

the Store :

Ext.define('module.store.ModuleTrees', {    extend: 'Ext.data.TreeStore',
    
    model: 'module.model.Module',
    
    defaultRootId: 0,
    nodeParam:'currentId',
    defaultRootProperty : 'items',
    rootVisible: false,
    
    proxy: {
        type: 'ajax',
        api : {
            read : 'module/children.action',
            update : 'module/update.action'
        }
    }
});

the controller:

Ext.define('module.controller.Module',    {
        extend : 'Ext.app.Controller',


        stores : ['ModuleTrees'],


        models : [ 'Module' ],


        views : [ 'ModuleToolbar', 'ModuleTreeGrid'],


        refs : [ {
            ref : 'toolbar',
            selector : 'moduleToolbar'
        }],


        init : function() {
            this.control({


                'toolbar button[action=disable]' : {
                    click : this.disableModule
                },
                'toolbar button[action=enable]' : {
                    click : this.enableModule
                }
            });
        },


        disableModule : function(button) {
            this.updateModuleStatus('module/updata.action',false);
        },


        // enable a module
        enableModule : function(button) {
            this.updateModuleStatus('module/updata.action',true);
        },


        updateModuleStatus : function(url,status) {
            var ids = this.getSelectionIds(),
            store = this.getModuleTreesStore(),
            node = store.getNodeById(ids[0]), //suppose only select a leaf
            pNode = node.parentNode;
                        
            Ext.Ajax.request({
                url : url,
                params : {
                    moduleIds : ids,
                    enable : status
                },
                success:function(response){
                    store.load({node:pNode});
                }
            });
        },


        
        getSelectionIds : function(){
            var modulePanel = this.getModuleTreeGrid(),
            record = modulePanel.getSelectionModel().getSelection(), 
            ids = '';


            if (record.length < 1) {
                return ids;
            }
            for ( var i = 0; i < record.length; i++) {
                if (i > 0) {
                    ids = ids + ',' + record[i].get('id');
                } else {
                    ids = ids + record[i].get('id');
                }
            }
            return ids;
        }
    });

the view ModuleTreeGrid:

Ext.define('module.view.ModuleTreeGrid', {    extend: 'Ext.tree.Panel',
    alias: 'widget.moduleTreeGrid',
    
    store: 'ModuleTrees',
    
    autoScroll: true,    
    rootVisible: false,    
    multiSelect: true,
    
    columns: [
            {
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'module tree',
                sortable: true,
                width:260,
                flex:2,
                dataIndex: 'text'
            },
            {
                  header : 'code',
                  dataIndex : 'code',
                  width : 100,
                  flex : 1
              },
              {
                  header : 'name',
                  dataIndex : 'text',
                  width : 260,
                  flex : 1
              },


              {
                  header : 'status',
                  dataIndex : 'enable',
                  width : 100,
                  flex : 1,
                  renderer: function(value){
                      if(value === true){
                          return 'enable';
                      }else{
                          return 'disable';
                      }
                  }
              }
          ]
});

the view Toolbar:

Ext.define('module.view.ModuleToolbar', {    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.moduleToolbar',
    
    items: [
        {
            text: 'enable',
            iconCls: 'icon-check',
            action: 'enable'
        },
        {
            text: 'disable',
            iconCls: 'icon-stop',
            action: 'disable'
        }
    ]
});

the application:

Ext.Loader.setConfig({enabled: true});

Ext.application({


    name: 'module',
    


    appFolder: 'app/module',
    
    controllers: [
        'Module'
    ],
    
    launch: function(){
        Ext.create('Ext.container.Viewport', {


            layout: 'fit',
            
            items: [
                {
                    layout: 'border',
                    items: [
                        {
                            xtype: 'moduleToolbar',
                            region: 'north'
                        },
                        {
                            xtype: 'moduleTreeGrid',
                            region: 'center'
                        }
                    ]
                }
            ]
        });
    }
});