1. #1
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Bangalore, INDIA
    Posts
    51
    Vote Rating
    0
    StutiAwasthi is on a distinguished road

      0  

    Default Answered: Passing object of Ext components for the tabpanel, ExtJS 4.0

    Answered: Passing object of Ext components for the tabpanel, ExtJS 4.0


    Hi all...!

    I am new to ExtJS framework and JavaScript. Currently I am working on ExtJS 4.0. I am able to create simple ExtJS widgets but by writing the code inline.
    Following is the type of design that I need to implement using ExtJS 4.0.

    screen11.PNG

    How can I write the code for tabpanel such that the toolbar, paging toolbar, gridpanel and data store code is written outside the tabpanel (i.e., not inline), only the object should get passed.
    Also, give any suggestions if you have for the correct implementation of this design.
    Please let me know if any other information is required.

  2. There are many techniques for simplifying inline monoliths and there are no definitive answers. However, I'll try to give you a sense of how to get started.

    Consider this code:

    Code:
    Ext.create('Ext.panel.Panel', {
        height: 300,
        renderTo: Ext.getBody(),
        title: 'Main',
        width: 300,
        items: [
            {
                height: 100,
                html: 'Content',
                title: 'Upper'
            }, {
                flex: 1,
                layout: ...,
                title: 'Lower',
                items: [
                    ...
                ]
            }
        ],
        layout: {
            align: 'stretch',
            type: 'vbox'
        }
    });
    For something so short there's no point splitting it up but it's easy to imagine it getting much longer as config options get added. The main technique is pulling each component out to its own class. These classes exist purely as convenient ways to break up the config, they aren't classes in the traditional sense.

    Code:
    Ext.define('MyApp.UpperPanel', {
        alias: 'widget.upperpanel',
        extend: 'Ext.panel.Panel',
    
        html: 'Content',
        title: 'Upper'
    });
    
    Ext.define('MyApp.LowerPanel', {
        alias: 'widget.lowerpanel',
        extend: 'Ext.panel.Panel',
    
        layout: ...,
        title: 'Lower',
    
        // Be careful specifying items this way, it only works if you use xtypes.
        // If you want to use Ext.create then move them into initComponent.
        items: [
            ...
        ]
    });
    
    Ext.define('MyApp.MainPanel', {
        extend: 'Ext.panel.Panel',
    
        title: 'Main',
    
        // Be careful specifying items this way, it only works if you use xtypes.
        // If you want to use Ext.create then move them into initComponent.
        items: [
            {
                height: 100, // height is a layout option, so keep it inline
                xtype: 'upperpanel'
            }, {
                flex: 1, // flex is a layout option, so keep it inline
                xtype: 'lowerpanel'
            }
        ],
        layout: {
            align: 'stretch',
            type: 'vbox'
        }
    });
    
    Ext.create('MyApp.MainPanel', {
        // These are all 'layout' options, so keep them inline
        height: 300,
        renderTo: Ext.getBody(),
        width: 300
    });
    Each class can then be moved to separate JS file.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    There are many techniques for simplifying inline monoliths and there are no definitive answers. However, I'll try to give you a sense of how to get started.

    Consider this code:

    Code:
    Ext.create('Ext.panel.Panel', {
        height: 300,
        renderTo: Ext.getBody(),
        title: 'Main',
        width: 300,
        items: [
            {
                height: 100,
                html: 'Content',
                title: 'Upper'
            }, {
                flex: 1,
                layout: ...,
                title: 'Lower',
                items: [
                    ...
                ]
            }
        ],
        layout: {
            align: 'stretch',
            type: 'vbox'
        }
    });
    For something so short there's no point splitting it up but it's easy to imagine it getting much longer as config options get added. The main technique is pulling each component out to its own class. These classes exist purely as convenient ways to break up the config, they aren't classes in the traditional sense.

    Code:
    Ext.define('MyApp.UpperPanel', {
        alias: 'widget.upperpanel',
        extend: 'Ext.panel.Panel',
    
        html: 'Content',
        title: 'Upper'
    });
    
    Ext.define('MyApp.LowerPanel', {
        alias: 'widget.lowerpanel',
        extend: 'Ext.panel.Panel',
    
        layout: ...,
        title: 'Lower',
    
        // Be careful specifying items this way, it only works if you use xtypes.
        // If you want to use Ext.create then move them into initComponent.
        items: [
            ...
        ]
    });
    
    Ext.define('MyApp.MainPanel', {
        extend: 'Ext.panel.Panel',
    
        title: 'Main',
    
        // Be careful specifying items this way, it only works if you use xtypes.
        // If you want to use Ext.create then move them into initComponent.
        items: [
            {
                height: 100, // height is a layout option, so keep it inline
                xtype: 'upperpanel'
            }, {
                flex: 1, // flex is a layout option, so keep it inline
                xtype: 'lowerpanel'
            }
        ],
        layout: {
            align: 'stretch',
            type: 'vbox'
        }
    });
    
    Ext.create('MyApp.MainPanel', {
        // These are all 'layout' options, so keep them inline
        height: 300,
        renderTo: Ext.getBody(),
        width: 300
    });
    Each class can then be moved to separate JS file.

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Bangalore, INDIA
    Posts
    51
    Vote Rating
    0
    StutiAwasthi is on a distinguished road

      0  

    Default


    Thank you skirtle...
    I have few other doubts regarding Ext 4.0... You seem to be an experienced person. Can you please gimme your email address so that I can directly contact you for this?

Thread Participants: 1