PDA

View Full Version : EXTJS - Components



rajdev0791
19 Jun 2014, 5:03 AM
I want to segregate components MVC Style. E.g i have three panels in VBox Layout the topmost one being a toolbar with menu's. Each toolbar item would have its own menus like below. Idea is to have a homeLayout.js ( that contains panels in VBox Layout), mytoolbar.js ( containing toolbars) , rVitesMenu.js() . All should be seperate JS files for better segregation. but it doesnt seem to work

--homeLayout
Ext.define('rVites.view.home.homeLayout', {
extend: 'Ext.Panel',
alias: 'widget.homeLayout',
width: '100%',
height: '100%',
layout: {
type: 'vbox',
align: 'center'
},
renderTo: document.body,
items: [{
xtype: 'panel',
width: '75%',
flex: .50,
bodyStyle: { "background-color": "#82CAFF" },
tbar: myToolBar
}, {
xtype: 'panel',
html: 'Search Panel',
width: '75%',
flex: 2
},{
xtype: 'panel',
html: 'Content Panel',
width: '75%',
flex: 6
}],
...
var rVitesmenu = Ext.create('Ext.menu.Menu', {
id: 'rVitesMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [{
text: 'Create',
}, {
text: 'Most Popular',
}, {
text: 'Most Recommended',
}
]
});

,,,
var myToolBar = Ext.create('Ext.toolbar.Toolbar', {
width: 500,
height: 42,
style:'font-family:verdana;font-size:14',
items: [
{ xtype: 'tbspacer' }, {
xtype: 'tbspacer', width: 50
}, {
//xtype: 'splitbutton',
text: 'rVites',
menu: rVitesmenu // assign menu by instance
}

mitchellsimoens
26 Jun 2014, 6:41 AM
The separate files need to use Ext.define to create definitions for them then in rVites.view.home.homeLayout use configs to use the xtypes you created for the new classes.

Also, this is overnesting:


{
xtype: 'panel',
width: '75%',
flex: .50,
bodyStyle: { "background-color": "#82CAFF" },
tbar: myToolBar
}

Why not set the toolbar on the rVites.view.home.homeLayout panel?