PDA

View Full Version : Rendering component in panel after button click



infernoz
2 Mar 2012, 11:53 AM
Hello,

I am attempting to create a navigation panel with a set of buttons where when each button is pressed, a different component (panel, grid, whatever) will be rendered in a different viewing panel next to the navigation panel.

I set up a border layout to house my navigation and viewing panel, and set up some buttons, but I am having difficulty figuring out how to render things in the viewing panel, particularly how to get hold of the component object I want to render as it is defined in a different js file than where I am defining my navigation/viewing objects.

I am trying to grab the component that I am trying to render doing this: var personGeoUnitView = Ext.getCmp('personGeoUnitView'); But it does not seem to be registered.

1. How can I register it? and
2. After I get a hold of the object, what is the proper way of rendering it in my viewing comopnent?

Here is my code thus far:
--Controller js files

Ext.define('DMT.controller.PanelController', {
extend: 'Ext.app.Controller',
stores: ['PersonGeoUnitStore'],
models: ['PersonGeoUnitModel'],
views: ['DMTPanel', 'PersonGeoUnitView'],

init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},

onPanelRendered: function() {

}
});

-- Main and Navigation Panel

Ext.define('DMT.view.DMTPanel' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.DMTPanel',
layout: 'border',
title: 'CMP Data Management Tool',

items: [
{
title: 'Navigation',
layout: 'border',
id: 'Navigation',
region: 'west',
split: true,
collapsible: true,
margins: '2 0 5 5',
width: 175,
maxWidth: 300,
items: [{
xtype: 'toolbar',
title: 'Navigation',
region: 'center',
vertical: true,
items: [{
id: 'PersonGeoUnitButton',
text: '<b>Person Geographical Unit</b>',
scale: 'medium',
listeners: {
'click': function() {
var personGeoUnitView = Ext.getCmp('personGeoUnitView');
alert(personGeoUnitView);
alert(Ext.ComponentManager.isRegistered('personGeoUnitView'));
}
}
},
{
id: 'OrgStatisticsButton',
text: '<b>Organization Statistics</b>',
scale: 'medium'
}]
}]
},
{
id: 'MainContent',
region: 'center',
margins: '5 0 0 0',
html: '<h1>DMT Content Will Go Here</h1><p>This is where the main content would go</p>'
}
],

initComponent: function() {
this.callParent(arguments);
}
});

-- One of the views I'd like to render js file

Ext.define('DMT.view.PersonGeoUnitView' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.personGeoUnitView',
id: 'personGeoUnitView',
title : 'PersonGeoUnitUpdate',
store: 'PersonGeoUnitStore',
selType: 'cellmodel',

plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],

dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
layout: {
pack: 'left'
},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Submit', width: 80, listeners: {
'click': function() {
var personGeoUnitStore = Ext.data.StoreManager.lookup('PersonGeoUnitStore');
var response = personGeoUnitStore.sync();
}}}
]
}],

initComponent: function() {
this.callParent(arguments);
}

Thanks,

infernoz

infernoz
2 Mar 2012, 11:54 AM
One more piece of info, my main viewport is rendering the navigation and viewing panel as such:


launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'DMTPanel'
}

});
}

vietits
2 Mar 2012, 4:48 PM
1. How can I register it? and

When a button is clicked, just create an component instance with Ext.create(). To avoid waiting for loading component at the time of creating, you should load it first with 'requires' or 'uses' config.



2. After I get a hold of the object, what is the proper way of rendering it in my viewing comopnent?

Add/insert your component instance to a container by using its add() or insert() method.

infernoz
2 Mar 2012, 5:23 PM
Thanks. What is the difference between Ext.create and Ext.widget? Both seem to work for this case described above.

vietits
2 Mar 2012, 5:48 PM
Ext.create() is used to instantiate a class by either full name, alias or alternate name.
Ext.widget() is a convenient shorthand to create a widget by its xtype.
Ex: You can create a button by one of the following ways:

var button = Ext.widget('button', {...});
var button = Ext.create('widget.button', {...});
var button = Ext.create('Ext.button.Button', {...});

infernoz
4 Mar 2012, 7:49 AM
Cheers. Thanks for the response. Essentially Ext.widget and Ext.create will create an instance of a class its just a matter of what way you want to create it (via xtype or name in a path). Is that a valid statement?

vietits
4 Mar 2012, 11:54 PM
It's not completely correct. Ext.widget() is only used with widget while Ext.create() can be used with a general class that is not nescessary to be a widget.