Extjs portal 使用方法

 

Ext.onReady(function(){
    var html = '<p>测试数据</p>';
    

		
		new Ext.Panel({
            title: 'Basic Panel',
            collapsible: true,
            //width:1400,
            //height:'500',
            renderTo: 'grid-example',
            buttons: [{
                text: 'Save',
                listeners: {
                    'click': function(){
                        portal = (Ext.getCmp('app-portal'))
                        var result = [];
                        var items = portal.items;
                        //alert(portal.getId())
                        
                        for (var i = 0; i < items.length; i++) {
                        
                            var c = items.get(i);
                            //alert(c.items)
                            c.items.each(function(portlet){
                                alert(portlet.getId())
                                var o = {
                                    id: portlet.getId(),
                                    col: i
                                };
                                result.push(o);
                            });
                        }
                        alert(Ext.encode(result));
                    },
                },
            
            }, {
                text: 'Cancel'
            }],
            bodyPadding: 7,
            items: [{
                xtype: 'container',
                region: 'center',
                layout: 'border',
                height: 600,
                items: [{
                    id: 'app-portal',
                    xtype: 'portalpanel',
                    region: 'center',
                    items: [{
                        id: 'col-1',
                        flex: 1,
                        items: [{
                            id: 'portlet-1',
                            title: 'Grid Portlet',
                            html: 'aaaaaaaa',
                            //items: new Ext.app.GridPortlet(),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this),
                                'click': function(){
                                
                                },
                            }
                        }, {
                            id: 'portlet-2',
                            title: 'Portlet 2',
                            
                            html: html,
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }, {
                        id: 'col-2',
                        flex: 1,
                        items: [{
                            id: 'portlet-3',
                            title: 'Portlet 3',
                            html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>',
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }, {
                        id: 'col-3',
                        flex: 1,
                        margins: '0 26 0 0',
                        items: [{
                            id: 'portlet-4',
                            title: 'Stock Portlet',
                            
                            items: new Ext.app.ChartPortlet(),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }]
                }]
            }]
        });
    });