1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    shanmugam is on a distinguished road

      0  

    Default Unanswered: View port items adding dynamically based on the configuration

    Unanswered: View port items adding dynamically based on the configuration


    Can we load the items dynamically to the view port based on the configuration

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Answers
    662
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Do you mean like this?

    Code:
    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.​

  3. #3
    Sencha User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    shanmugam is on a distinguished road

      0  

    Default


    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);
    // }
    // }
    }]
    });

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    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.

    Code:
    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'
            }
        ]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    shanmugam is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    33
    Answers
    2
    Vote Rating
    0
    alane is on a distinguished road

      0  

    Default


    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?

    Quote Originally Posted by scottmartin View Post
    Do you mean like this?

    Code:
    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.​