examples/bootstrap/nested.js
authorAlan Knowles <alan@roojs.com>
Fri, 7 Dec 2018 06:26:10 +0000 (14:26 +0800)
committerAlan Knowles <alan@roojs.com>
Fri, 7 Dec 2018 06:26:10 +0000 (14:26 +0800)
examples/bootstrap/nested.js

index 0fc6ebb..9df8e87 100644 (file)
@@ -18,17 +18,7 @@ Example.Nested = new Roo.XComponent({
             xtype : 'Border',
             xns : Roo.bootstrap.layout,
             el : document.body, // border layout can be applied to the outer one...
-            west: {
-                xtype : 'Region',
-                xns: Roo.bootstrap.layout,
-                split:true,
-                tabPosition: 'top',
-                initialSize: 400,
-                titlebar: true,
-               // collapsible: true,
-                minSize: 100,
-                maxSize: 500
-            },
+            
             north: {
                 xtype : 'Region',
                 xns: Roo.bootstrap.layout,
@@ -114,134 +104,7 @@ Example.Nested = new Roo.XComponent({
                     
                 },
              
-                {
-                    xtype : 'Content',
-                    xns: Roo.bootstrap.panel,
-                    title : "Title west a" ,
-                    fitToFrame:true,
-                    closable:false,
-                    region : 'west',
-                    html : 'some body west'
-                    
-                },
-                {
-                    xtype : 'Grid',
-                    xns: Roo.bootstrap.panel,
-                    title : "Test Grid",
-                    fitToFrame:true,
-                    closable:false,
-                    region : 'west',
-                    listeners : {
-                            activate : function()
-                            {
-                              //  this.grid.store.load.defer(100, this.grid.store);
-                               this.grid.footer.onClick('first');
-                            }
-                        },
-                    toolbar : {
-                        xtype: 'NavSimplebar',
-                        xns : Roo.bootstrap,
-                       
-                        items: [
-                            {
-                                xtype: 'NavGroup',
-                                xns: Roo.bootstrap,
-                               form: true,
-                                items : [
-                                    {
-                                        xtype: 'NavItem',
-                                        xns: Roo.bootstrap,
-                                        html: 'a button'
-                                        
-                                    },
-                                    {
-                                        xtype: 'Input',
-                                        xns: Roo.bootstrap,
-                                        placeholder: 'a text input'
-                                        
-                                    }
-                                ]
-                            }
-                        ]
-                        
-                    },
-                    grid : {
-                        loadMask : true,
-                        striped : true,
-                        xns : Roo.bootstrap,
-                        xtype : 'Table',
-                        cls : 'table-fixed',
-                        rowSelection : true,
-                        footer : {
-                            xtype : 'PagingToolbar',
-                            pageSize : 25,
-                            xns : Roo.bootstrap,
-                            '|xns' : 'Roo.bootstrap'
-                        },
-                        store : {
-                            xns : Roo.data,
-                            xtype : 'Store',
-                         
-                            proxy : {
-                                xns : Roo.data,
-                                xtype : 'MemoryProxy',
-                                data: [
-                                    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
-                                    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
-                                    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
-                                    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
-                                    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
-                                    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
-                                    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
-                                    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
-                                    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
-                                    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
-                                    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
-                                    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
-                                    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
-                                    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'] 
-                                ]
-                            },
-                            reader : {
-                           
-                                xns : Roo.data,
-                                xtype : 'ArrayReader',
-                                fields: [
-                                    {name: 'company'},
-                                    {name: 'price', type: 'float'},
-                                    {name: 'change', type: 'float'},
-                                    {name: 'pctChange', type: 'float'},
-                                    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
-                                ]
-                            },
-                        },
-                        cm : [
-                            
-                            {
-                                id:'company',
-                                header: "Company",
-                                width: 160,
-                                sortable: true,
-                                locked:false,
-                                dataIndex: 'company',
-                                xns : Roo.grid,
-                                xtype : 'ColumnModel'
-                            },
-                            {
-                                header: "Price",
-                               width: 160,
-                                sortable: true,
-                                renderer: Roo.util.Format.usMoney,
-                                dataIndex: 'price',
-                                xns : Roo.grid,
-                                xtype : 'ColumnModel'
-                            }
-                            
-                        ]
-                        
-                    }
-                
-                },
+               
                 {
                     xtype : 'Content',
                     xns: Roo.bootstrap.panel,
@@ -266,19 +129,32 @@ Example.Nested = new Roo.XComponent({
                         south: {
                             xtype : 'Region',
                             xns: Roo.bootstrap.layout,
-                               split:true,
-                               initialSize: 200,
-                               minSize: 100,
-                               maxSize: 400,
-                               autoScroll:true,
-                               collapsible:true,
-                               titlebar: true
-                           },
-                           center: {
+                           split:true,
+                           initialSize: 200,
+                           minSize: 100,
+                           maxSize: 400,
+                           autoScroll:true,
+                           collapsible:true,
+                           titlebar: true
+                        },
+                       center: {
                             xtype : 'Region',
                             xns: Roo.bootstrap.layout,
-                               autoScroll:true,
-                           },
+                           autoScroll:true,
+                       },
+                       
+                       west: {
+                           xtype : 'Region',
+                           xns: Roo.bootstrap.layout,
+                           split:true,
+                           tabPosition: 'top',
+                           initialSize: 400,
+                           titlebar: true,
+                          // collapsible: true,
+                           minSize: 100,
+                           maxSize: 500
+                       },
+                       
                         items : [
                             {
                                 xtype : 'Content',
@@ -294,6 +170,137 @@ Example.Nested = new Roo.XComponent({
                                 region : 'center',
                                 html : 'some body center'
                             },
+                           
+                           {
+                                   xtype : 'Content',
+                                   xns: Roo.bootstrap.panel,
+                                   title : "Title west a" ,
+                                   fitToFrame:true,
+                                   closable:false,
+                                   region : 'west',
+                                   html : 'some body west'
+                                   
+                               },
+                               {
+                                   xtype : 'Grid',
+                                   xns: Roo.bootstrap.panel,
+                                   title : "Test Grid",
+                                   fitToFrame:true,
+                                   closable:false,
+                                   region : 'west',
+                                   listeners : {
+                                           activate : function()
+                                           {
+                                             //  this.grid.store.load.defer(100, this.grid.store);
+                                               this.grid.footer.onClick('first');
+                                           }
+                                       },
+                                   toolbar : {
+                                       xtype: 'NavSimplebar',
+                                       xns : Roo.bootstrap,
+                                       
+                                       items: [
+                                           {
+                                               xtype: 'NavGroup',
+                                               xns: Roo.bootstrap,
+                                               form: true,
+                                               items : [
+                                                   {
+                                                       xtype: 'NavItem',
+                                                       xns: Roo.bootstrap,
+                                                       html: 'a button'
+                                                       
+                                                   },
+                                                   {
+                                                       xtype: 'Input',
+                                                       xns: Roo.bootstrap,
+                                                       placeholder: 'a text input'
+                                                       
+                                                   }
+                                               ]
+                                           }
+                                       ]
+                                       
+                                   },
+                                   grid : {
+                                       loadMask : true,
+                                       striped : true,
+                                       xns : Roo.bootstrap,
+                                       xtype : 'Table',
+                                       cls : 'table-fixed',
+                                       rowSelection : true,
+                                       footer : {
+                                           xtype : 'PagingToolbar',
+                                           pageSize : 25,
+                                           xns : Roo.bootstrap,
+                                           '|xns' : 'Roo.bootstrap'
+                                       },
+                                       store : {
+                                           xns : Roo.data,
+                                           xtype : 'Store',
+                                        
+                                           proxy : {
+                                               xns : Roo.data,
+                                               xtype : 'MemoryProxy',
+                                               data: [
+                                                   ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
+                                                   ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
+                                                   ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
+                                                   ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
+                                                   ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
+                                                   ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
+                                                   ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
+                                                   ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
+                                                   ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
+                                                   ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
+                                                   ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
+                                                   ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
+                                                   ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
+                                                   ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'] 
+                                               ]
+                                           },
+                                           reader : {
+                                          
+                                               xns : Roo.data,
+                                               xtype : 'ArrayReader',
+                                               fields: [
+                                                   {name: 'company'},
+                                                   {name: 'price', type: 'float'},
+                                                   {name: 'change', type: 'float'},
+                                                   {name: 'pctChange', type: 'float'},
+                                                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
+                                               ]
+                                           },
+                                       },
+                                       cm : [
+                                           
+                                           {
+                                               id:'company',
+                                               header: "Company",
+                                               width: 160,
+                                               sortable: true,
+                                               locked:false,
+                                               dataIndex: 'company',
+                                               xns : Roo.grid,
+                                               xtype : 'ColumnModel'
+                                           },
+                                           {
+                                               header: "Price",
+                                              width: 160,
+                                               sortable: true,
+                                               renderer: Roo.util.Format.usMoney,
+                                               dataIndex: 'price',
+                                               xns : Roo.grid,
+                                               xtype : 'ColumnModel'
+                                           }
+                                           
+                                       ]
+                                       
+                                   }
+                               
+                               },
+                           
+                           
                         ]
                     }