Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Supress TreePanel loading automatically

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
      0  

    Default Answered: Supress TreePanel loading automatically

    Hello,

    I have the following treepanel:

    Code:
    Ext.define('NavBuilder.SitemapList', {
        extend: 'Ext.tree.Panel',
        alias: 'widget.sitemaplist',
        
        //rootVisible: false,
        
        initComponent: function(){
            
            Ext.apply(this, {
                viewConfig: {
                    plugins: {
                        ptype: 'treeviewdragdrop'
                        
                    },
                    listeners: {
                        drop: function (node, data, overModel, dropPosition, options ) {         
                            var treePanel = this.ownerCt;
                            treePanel.down('#saveButton').setDisabled(false);      
                        }
                    }
                },
                store: Ext.create('Ext.data.TreeStore', {
                    model: 'NavBuilder.NavigationNode',
                    root: {
                        expanded: true,
                        text: 'SiteName',
                        id: 'rootNode'
                    },
                    proxy: {
                        type: 'ajax',
                        url: 'sitemap/candy-v6/highweb/domestic'
                    }
                }),
                dockedItems: [{
                    itemId: 'toolbar',
                    xtype: 'toolbar',
                    items: [{
                        xtype:'combo',
                        forceSelection: true,
                        editable:       false,
                        fieldLabel:     'Sitemap',
                        labelWidth:     50,
                        mode:             'local',
                        width:            270,
                        name:           'selectsitemapcombo',
                        itemId:            'selectsitemapcombo',
                        displayField:   'uri',
                        valueField:     'uri',
                        selectOnFocus:  true,
                        store:          Ext.create('Ext.data.Store', {
                            model: 'NavBuilder.SitemapItem',
                            proxy: {
                                type: 'ajax',
                                url: 'sitemap/list'
                            },
                            autoLoad: true,
                            listeners: {
                                load: function(store, records, successful, operation, eOpts ){
                                    sitemapcombo.setValue(store.getAt(0).get('uri'));
                                }                        
                            }
                        
                        }),
                        listeners: {
                            select: function(combo, records, eOpts){
                                var uri = records[0].get('uri');
                                tree.getStore().getProxy().url = 'sitemap/'+uri;
                                tree.getStore().load();
                            }
                        }
                    }, {
                        xtype: 'tbseparator'
                    }, {
                            itemId: 'expandAll',
                            text: 'Expand All',
                            handler: this.onExpand
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            itemId: 'collapseAll',
                            text: 'Collapse All',
                            handler: this.onCollapse
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            itemId: 'refresh',
                            text: 'Refresh',
                            handler: this.onRefresh
                        }, {
                            xtype: 'tbseparator'
                        }, {
                            itemId: 'saveButton',
                            text: 'Save',
                            disabled: true,
                            handler: this.onSave
                        }
                    ]
                }],
                listeners: {               
                    itemcontextmenu: function(view, rec, node, index, e) {
                        e.stopEvent();
                        menu.showAt(e.getXY());
                        return false;
                    }
                }
            });
            this.callParent();
            this.getSelectionModel().on({
                scope: this,
                select: this.onSelect
            });
            var menu = Ext.create('NavBuilder.ContextMenu', { tree: this});
            var sitemapcombo = this.down('#selectsitemapcombo');
        },
    You will see that the url for the remote store is hard coded to: 'sitemap/candy-v6/highweb/domestic'

    But what I would like to do is set it to the first item which appears in the combo-box which is part of the docked items of the tree panel but this doesn't appear to be possible.

    I tried passing a method to the url config option which then called an ajax request but this was all a bit messy.

    Is there not an easy way to do this, it seems like an obvious piece of functionality to be able to select an item from a combo and load the data into a tree. This part is actually working, it is just the initial load which is causing problems.

    Thanks

  2. Nope.

    Setting the root to a new expanded node both clears the old tree and kicks off a load.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    I'm not sure what you mean by the 'initial load'. Do you mean the tree's store is trying to load results before you've set a suitable URL? If so then I'd try setting the root to collapsed rather than expanded.

    If you don't like setting the proxy URL in that way then one alternative might be to call setProxy() instead. May feel like overkill but at least it's documented.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Perhaps I didn't explain it very well. Sorry. Basically what gets loaded into the tree panel is dependent on what is loaded into the combo drop down from that remote store. So once that combobox has loaded the first url in it should be used to load the treepanel.

    However the problem I am having is that you have to load something into a treepanel when it loads as you have to specify a url for the treestore it is using.

    One idea i Had was to load the treepanel initially with an empty store and then change the store when the combo populates and an item is selected.

    Hope that makes sense.
    Jon

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Yes, you could do it with a store switch if you don't mind using undocumented methods. An alternative would be to set the initial root node to be a leaf and then switch it when you're ready to load the data.

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Thanks, How do you do a store switch?

    I did get a bit further. I used the original store with a default proxy and then tried to change the proxy and reload the tree like so:

    Code:
                var tree = this.ownerCt.ownerCt;
                tree.getStore().setProxy({
                    type: 'ajax',
                    url: 'sitemap/'+newValue
                });            
                tree.getStore().load();
    But it calls the new url twice and then tries to load both results into the tree, when the second load occurs you get an error: records[i] is undefined followed by duplicated data in the tree.

    Thanks

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    I was talking rubbish, you can switch the store using documented methods. Use reconfigure():

    http://docs.sencha.com/ext-js/4-0/#!...od-reconfigure

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    I'd also advise using a component query rather than this.ownerCt.ownerCt to grab the tree.

  9. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
      0  

    Default

    using reconfigure has the same effect with the url for the store being called twice.

  10. #9
    Sencha User
    Join Date
    Aug 2011
    Posts
    27
    Vote Rating
    0
      0  

    Default

    So for example:

    Code:
    onChange: function(combo, newValue, oldValue, eOpts) {
            var tree = this.ownerCt.ownerCt;
            
            if(newValue!=null){
                console.log(newValue);
                
    
                var tree = this.ownerCt.ownerCt;
                //tree.getStore().setProxy({
                //    type: 'ajax',
                //    url: 'sitemap/'+newValue
                //});
                
                var anotherStore = Ext.create('NavBuilder.TreePanelStore1');
                anotherStore.getProxy().url = 'sitemap/'+newValue;
                console.log(anotherStore);
    
                var records = anotherStore.load();
                //console.log(records.tree.root);
            
                //tree.expandAll();
                //tree.show();
                
                //tree.reconfigure(anotherStore);
                //tree.getStore().load();
                //tree.getStore().load(anotherStore);
                
                //tree.setRootNode(records.tree.root);
                //tree.getStore().getRootNode().data.text = newValue;
                
                //console.log(tree.getStore());
            }
    This line: var records = anotherStore.load(); results in two http calls to the same url which is the problem I think.

    It doesn't matter which way I try it. Would it be something to do with it being in the onChange handler?

    Jon

  11. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Could you just confirm that no requests get sent when you remove the call to load()?

    What about doing a switch on the root node instead?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •