PDA

View Full Version : Passing object of Ext components for the tabpanel, ExtJS 4.0



StutiAwasthi
19 Oct 2011, 10:54 PM
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.

28756

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.

skirtle
20 Oct 2011, 2:31 PM
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:


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.


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.

StutiAwasthi
3 Nov 2011, 1:32 AM
Thank you skirtle (http://www.sencha.com/forum/member.php?197255-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?