PDA

View Full Version : Add/change widget on panel dynamically



rj45
26 Sep 2013, 5:27 AM
I'm just start learning ExtJS and stuck with problem.
I have a viewoprt with border layout. How can i dynamically add and change widget on panel, that is on the west region by clicking on button in mainmenu toolbar?
mainmenu is a toolbar with region: 'north', leftpanel and rightpanel is panels with region 'west' and 'center'

Ext.create('Ext.container.Viewport', {
id: 'base_viewport',
layout: 'border',

defaults: { // ????????? ?? ????????? ??? ????????? ???????
xtype: 'panel',
split: true,
},

items: [
{
xtype: 'mainmenu',
split: false,
},
{
xtype: 'leftpanel',
flex: 3
},
{
xtyle: 'rightpanel',
flex: 1,
}
],
});
P.S. I'm trying to use MVC pattern.
P.P.S. Sorry for my english ^_^

existdissolve
26 Sep 2013, 9:20 AM
To add a component to one of the regions (center, for example), you simply need to traverse the hierarchy of components to get the center region.

For example, if the button you click is in the "north" region, you could do something like:


button.up( 'viewport' ).down( '#itemIdofCenterRegion' )

One you have the center region, you can add, update, edit, whatever, just like with any other component.

Here's an example:

mi

Of course, this example just uses an inline button handler, but you could easily move this into a controller if you'd like.

rj45
27 Sep 2013, 12:17 AM
Thanks a lot for advice. It works. But now I have another noob question.
I need to change widget in west panel for example. I have defined view called lasfirms and canroller, called firms:
Ext.define('myapp.view.Lastfirms', {
extend: 'Ext.panel.Panel',
alias: 'widget.lastfirms',
id: 'lastfirms',
layout: 'fit',
title: '????????? ?????',
});

Ext.create('myapp.controller.Firms', {
extend: 'Ext.app.Controller',
views: ['Lastfirms'],

init: function(){
this.control({
......
});
},
});

How can I add this view in west panel?
my app.js:
Ext.Loader.setConfig({ enabled: true,
});


Ext.application({
requires: ['Ext.container.Viewport'],
controllers: ['Interface', 'Firms'],

name: 'myapp',
appFolder: 'js',


launch: function(){
Ext.create('Ext.container.Viewport', {
id: 'base_viewport',
layout: 'border',
items: [
{ xtype: 'mainmenu', split: false, },
{ xtype: 'leftpanel', },
{ xtype: 'rightpanel', },
],
});


}
});My Interface controller:
Ext.define('myapp.controller.Interface', { extend: 'Ext.app.Controller',
views: ['layout.Mainmenu', 'layout.Leftpanel', 'layout.Rightpanel'],

init: function(){
this.control({ // ????????? ???????????? ?? ????????
'viewport > mainmenu > button[action=showAllFirms]': {
click: this.showAllFirms
},
});
},

showAllFirms: function(button) {
var leftpanel = button.up('viewport').down('leftpanel');

leftpanel.removeAll();
leftpanel.add({xtype: 'lastfirms'}); // ??????
},
});

existdissolve
27 Sep 2013, 10:21 AM
Your controller doesn't know about that xtype because it hasn't been loaded by Ext.Loader yet. Try adding the view to the views[] config in your controller.

rj45
27 Sep 2013, 10:39 AM
Try adding the view to the views[] config in your controller.in Interface controller?