1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    33
    Vote Rating
    0
    xunxin is on a distinguished road

      0  

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

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


    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    33
    Vote Rating
    0
    xunxin is on a distinguished road

      0  

    Default


    it is my pleasure.

    the model:
    Code:
    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 :
    Code:
    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:
    Code:
    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:
    Code:
    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:
    Code:
    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:
    Code:
    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'
                            }
                        ]
                    }
                ]
            });
        }
    });

Thread Participants: 1