Portal Demo

by mmthaker

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/Portal.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/Portlet.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/PortalColumn.js"></script>

JavaScript

var win = new Ext.Window({
 width       : 300
,height      : 500
,renderTo : Ext.getBody()
,items       : [{
             xtype : 'portal'
            ,margins:'35 5 5 0'
            ,items : [{
                        columnWidth:.33
                    ,defaults:{defaults:{height:30}}
                        ,style:'padding:10px 0 10px 10px'
                        ,items : [{xtype:'panel'
                                    //,title : 'Panel1'
                                    ,draggable:true
                                    ,items : [{xtype:'displayfield',value:'col1-item1' ,draggable:true}]
                                 },{xtype:'panel'
                                    //,title : 'Panel2'
                                    ,draggable:true
                                    ,items : [{xtype:'displayfield',value:'col1-item2'}]
                                 },{xtype:'panel'
                                    //,title : 'Panel3'
                                    ,draggable:true
                                    ,items : [{xtype:'displayfield',value:'col1-item3'}]
                                 },{xtype:'panel'
                                    //,title : 'Panel3'
                                    ,draggable:true
                                    ,items : [{xtype:'displayfield',value:'col1-item4'}]
                                 },{xtype:'panel'
                                    //,title : 'Panel3'
                                    ,draggable:true
                                    ,items : [{xtype:'displayfield',value:'col1-item5'}]
                                 }]
                    }]//eo items
            }]//eo items


}).show();