Results 1 to 3 of 3

Thread: Add new tab when node selected in treepanel

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Answers
    1

    Default Answered: Add new tab when node selected in treepanel

    I'm new to extjs and need advice. My app consists of a border layout with a nav on one side and a main window in the center region. Our navigation is a list of items displayed in a treepanel that is loaded via ajax. Our code looks like

    Code:
    Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.tree.*']);
    
    
    Ext.onReady(function () {
        //we want to setup a model and store instead of using dataUrl
        Ext.define('Report', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'report_name',
                type: 'string'
            }, {
                name: 'report_link',
                type: 'string'
            }]
        });
    
    
        var store = Ext.create('Ext.data.TreeStore', {
            //model: 'Report',
            proxy: {
                type: 'ajax',
                url: 'http://10.0.0.9:8005/ReportServlet?companyID=3&action=reportList'
            },
            folderSort: true
        });
    
    
        //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
        var nav = Ext.create('Ext.tree.Panel', {
            region: 'west',
            title: 'Navigation',
            frame: true,
            width: '35%',
            height: '100%',
            // renderTo: Ext.(),getBody
            useArrows: true,
            rootVisible: false,
            store: store,
            multiSelect: true,
            collapsible: true
        });
    
    
        var win = Ext.create('Ext.tab.Panel', {
            region: 'center',
            items: [{
                title: 'Bogus Tab',
                html: 'Hello world 1'
            }, {
                title: 'Another Tab',
                html: 'Hello world 2'
            }, {
                title: 'Closable Tab',
                html: 'Hello world 3',
                closable: true
            }]
        });
    
    
        Ext.create('Ext.window.Window', {
            title: 'Reports',
            height: 700,
            width: 900,
            minWidth: 350,
            layout: 'border',
            closable: false,
            items: [nav, win]
    }).show();
    
    
    });
    What I'd like to do is automatically create a new tab in the main window whenever a node is clicked in the treepanel navigation.

    Later on, I'd like to have the tab that is created load a grid that displays data loaded from a store with an ajax proxy.

    I'm new to extjs and not sure how to do this. I've been poking through the examples and couldn't find one that matches my requirements. Any advice would be appreciated. Thank you!

  2. Download the migration app and it will provide what you are looking for:
    http://cdn.sencha.io/ext-3-to-4-migration-pack.zip

    Tutorial of application:
    http://www.sencha.com/blog/ext-js-3-to-4-migration

    Regards
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Download the migration app and it will provide what you are looking for:
    http://cdn.sencha.io/ext-3-to-4-migration-pack.zip

    Tutorial of application:
    http://www.sencha.com/blog/ext-js-3-to-4-migration

    Regards
    Scott.

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Here are a few changes you want to make if you are using 4.1.

    NavTree.js : remove listener from prototype

    L: 14: (remove code)
    Code:
        listeners: {
            'itemclick': function(view, model) {
                this.fireEvent('navclick', this, model.data.id);
            }
        },
    L: 40: (remove code)
    Code:
    this.addEvents('navclick');
    App.js

    Code:
    L: 52: (change code)
    from:
    'navclick': function(tree, nodeId) {
    	this.syncNavigation(nodeId);
    },

    to:

    Code:
    'itemclick':function (tree, nodeId) {
    	this.syncNavigation(nodeId.data.id);
    },
    This original code worked in 4.0, but does not in 4.1

    Regards,
    Scott.

Tags for this Thread

Posting Permissions

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