Results 1 to 3 of 3

Thread: Dynamically adding "portlet" items to an EXT portal component

  1. #1
    Sencha User BulletzBill's Avatar
    Join Date
    Mar 2010
    Location
    New York
    Posts
    138

    Question Dynamically adding "portlet" items to an EXT portal component

    Hey guys,

    I am developing a portal inteface using a customized version of the ext portal layout demo and I need some direction on how to dynamically add new portlet panels to the interface. The logic is, when a user selects a panel from an Add Panel menu, the new portlet will be created in the portal area in column 0, position 0. Heres my current code with dummy panels that lays out the interface:

    Code:
    Ext.onReady(function(){
    
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        // create some portlet tools using built in Ext tool ids
        var tools = 
        [
            {
                id:'refresh',
                handler: function(e, target, panel){
                    Ext.Msg.alert('Message', 'The refresh button was clicked.');
                    //call the panel refresh function
                }
            },
            {
                id:'close',
                handler: function(e, target, panel){
                    panel.ownerCt.remove(panel, true);
                    //panel removal ajax function here
                }
            }
        ];
    
        var portal_container = new Ext.Container({
            id: 'portal_vp',
            layout:'column',
            monitorResize: true,
            layoutConfig: { align: 'stretch' },
            autoWidth: true,
            border: false,
            renderTo: 'panels_area',
            items:[
            {
                columnWidth: 1,
                xtype:'portal',
                border: false,
                margins:'0 0 0 0',
                items:
                [
                    {
                        columnWidth:.333,
                        style:'padding:0 0 0 0',
                        items:[{
                            title: 'Panel 1',
                            tools: tools,
                            html: '<div class="panel_body" id="panel_body_1">This is sample  content!</div>'
                        },{
                            title: 'Another Panel',
                            tools: tools,
                            html: '<div class="panel_body" id="panel_body_2">This is sample content!</div>'
                        }]
                    },
                    {
                        columnWidth:.333,
                        style:'padding:0 0 0 10px',
                        items:[{
                            title: 'Panel 2',
                            tools: tools,
                            html: '<div class="panel_body" id="panel_body_3">This is sample content!</div>'
                        },{
                            title: 'Another Panel 2',
                            tools: tools,
                            html: '<div class="panel_body" id="panel_body_4">This is sample content!</div>'
                        }]
                    },
                    {
                        columnWidth:.333,
                        style:'padding:0 0 0 10px',
                        items:[{
                            title: 'Panel 2',
                            tools: tools,
                            html: '<div class="panel_body" id="panel_body_5">This is sample content!</div>'
                        },{
                            title: 'Another Panel 2',
                            tools: tools,
                            html: '<div class="panel_body" id="panel_body_6">This is sample  content!</div>'
                        }]
                    },
                ]
                ,listeners: {
                    'drop': function(e){
                        
                        /*
                        Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + 
                            e.columnIndex + '<br />Position: ' + e.position);
                        */
                    }
                }
            }
        ]
        });
    });
    Thanks in advance for any help!

  2. #2
    Sencha User BulletzBill's Avatar
    Join Date
    Mar 2010
    Location
    New York
    Posts
    138

    Default

    Any ideas on this?

    Just to clarify, the demo I'm basing my portal interface on is this one:
    http://www.extjs.com/deploy/dev/exam...al/portal.html


    Thanks again

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Sarnia, ON, Canada
    Posts
    62

    Default

    I know this is old, but it still might help someone using Ext4. In the portal.js example just add a method like this and call it from a button or something:

    Code:
        addPanel : function()
        {
            var panelNew = Ext.create('Ext.app.Portlet', {            
                title: 'The New Panel',
                tools: this.getTools(),
                items: Ext.create('Ext.app.GridPortlet'),
                listeners: {
                    'close': Ext.bind(this.onPortletClose, this)
                }
            });
            Ext.getCmp('col-1').add(panelNew);
        }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •