PDA

View Full Version : View port items adding dynamically based on the configuration



shanmugam
13 Jul 2012, 5:50 AM
Can we load the items dynamically to the view port based on the configuration

scottmartin
13 Jul 2012, 8:55 PM
Do you mean like this?



var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody()
});

var vp = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: []
});

vp.add(panel);


Scott.?

shanmugam
13 Jul 2012, 11:29 PM
we have the viewport with "west" region and "center" region.

Center region contents will be loaded dynamically based on the device selection.

Some devices will have two sub units (for example: airconditioner -1no, DC Fan -1 no)
Some devices will have three sub units(for example: airconditioner-2nos, DC Fan-1 no) and so on

These are the configuration comes from the database.

I will submit the code below:

var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},
{
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
id: 'batt',
title: 'Battery',
layout:'fit',
anchor: '-0',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
id: 'batt1',
title: 'Inverter Meter',
layout:'fit',
tools: tools,
anchor: '-0',
dynamic: true,
items: new SampleGrid([0, 2, 3])
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'DG Energy Meter',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'BTS-1',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Aircon',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'DC Fan',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
}]
}]

/*
* Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone.
*/
// ,listeners: {
// 'drop': function(e){
// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
// e.columnIndex + '<br />Position: ' + e.position);
// }
// }
}]
});

sword-it
14 Jul 2012, 1:39 AM
Hi,
I am giving an example how you can add items to the center region of viewport. I added items on the click event of Ext.button.Button, you may do that on the load event of store or on any event you want.




Ext.create('Ext.Viewport', {
layout: 'border',
items: [
{
xtype: 'panel',
title: 'West Panel',
height: 60,
region: 'north',
items: [
{
xtype: 'button',
text: 'click to add two items',
handler: function(){
var centerPanel = this.ownerCt.nextSibling(); // finding the center panel
// adding items to center panel dynamically
centerPanel.add([
{xtype: 'textfield', fieldLabel: 'textfield'},
{xtype: 'textfield', fieldLabel: 'another textfield'}
]);
centerPanel.doLayout();
}
},
{
xtype: 'button',
text: 'click to add three items',
handler: function(){
var centerPanel = this.ownerCt.nextSibling(); // finding the center panel
// adding items to center panel dynamically
centerPanel.add([
{xtype: 'textfield', fieldLabel: 'textfield'},
{xtype: 'textfield', fieldLabel: 'another textfield'},
{xtype: 'textfield', fieldLabel: 'third textfield'}
]);
centerPanel.doLayout();
}
}
]
},
{
xtype: 'panel'
, title: 'center Panel'
, layout: 'form'
, region: 'center'
}
]
});

shanmugam
15 Jul 2012, 10:54 PM
Thanks for the response Mr.swort-it.

But actually I wanted in a different way. Like

I will explain in detail.... ,
1. we have a specific page which shows the data of different devices like Airconditioner, DC Fan, Diesel Generator and so on.
2. These devices data changes from site to site. (some of the sites will have Airconditioner and some will not).

3. Based on the initial selection of the site, the devices data will change.
4. It means we cannot have a fixed item in the "center region".
5. One way is to have a maximum set of items in the "center region" which is not a good idea.
6. Is there any way we can achieve this.

Regards,
Shanmugam

alane
21 Sep 2012, 1:53 PM
This is kinda off topic, but I was looking to use something like this in a MVC setting.
I have a viewport being created at the app level, with a button hooked up to a controller that I want to use to call the add method below. How would you refer to a viewport that's already been created?


Do you mean like this?



var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody()
});

var vp = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: []
});

vp.add(panel);


Scott.?