examples/bootstrap/nested.html

[roojs1] / examples / bootstrap / nested.html

diff --git a/examples/bootstrap/nested.html b/examples/bootstrap/nested.html
index db268d6..43e0907 100644 (file)
--- a/examples/bootstrap/nested.html
+++ b/examples/bootstrap/nested.html
@@ -9,29 +9,29 @@ porting tst for layout classes from original roo library into bootstrap one.
   <title>Nested Layout</title>
   
    <!-- Bootstrap -->
-    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
-       
+    <link href="../../css-bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />   
     <link href="../../css-bootstrap/font-awesome.css" rel="stylesheet" type="text/css" />
-   
     <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
     
-    <link href="../../../bootswatch/material-kit/css/material-kit.css" rel="stylesheet">
+  <!--  <link href="../../../bootswatch/material-kit/css/material-kit.css" rel="stylesheet"> -->
 
     
         
     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
     <!-- bootstrap js.. needs to compile it later.. -->
     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
-
+    
   
-
-       <script type="text/javascript">
+    
+    
+    
+    <script type="text/javascript">
 
 Roo.namespace("Dashboard");
     </script>
      
          <script type="text/javascript" src="Dashboard.Header1.js"></script>
-
+<script type="text/javascript" src="./nested-dialog.js"></script>
      
      
      
@@ -39,6 +39,35 @@ Roo.namespace("Dashboard");
 .navbar {
     padding: 0;
 }
+/*
+ 
+.table-body-fixed tbody {
+   overflow-y: scroll;
+  width: 100%;
+}
+.table-body-fixed  thead,
+.table-body-fixed  tbody,
+ 
+.table-body-fixed th   {
+  display: block;
+}
+.table-body-fixed thead {
+    overflow:  hidden;
+}
+
+
+.table-body-fixed tbody td, 
+.table-body-fixed thead > tr> th {
+  float: left;
+  border-bottom-width: 0;
+}
+ .table-body-fixed thead > tr,
+.table-body-fixed tbody > tr
+{
+    display: block;
+    overflow: hidden;
+}
+*/
         </style>
        <script type="text/javascript">
 
@@ -70,7 +99,7 @@ Example.Nested = new Roo.XComponent({
                 titlebar: true,
                // collapsible: true,
                 minSize: 100,
-                maxSize: 400
+                maxSize: 500
             },
             north: {
                 xtype : 'Region',
@@ -130,7 +159,13 @@ Example.Nested = new Roo.XComponent({
                                             },
                                             xtype : 'NavItem',
                                             xns : Roo.bootstrap,
-                                            html : 'test',
+                                            listeners : {
+                                                click : function()
+                                                {
+                                                    Example.NestedDialog.show({});
+                                                }
+                                            },
+                                            html : 'test dialog',
                                             items : [
         
                                             ]
@@ -168,17 +203,49 @@ Example.Nested = new Roo.XComponent({
                     fitToFrame:true,
                     closable:false,
                     region : 'west',
-                    
+                    listeners : {
+                            activate : function()
+                            {
+                                this.grid.store.load.defer(100, this.grid.store);
+                            }
+                        },
+                    toolbar : {
+                        xtype: 'NavSimplebar',
+                        xns : Roo.bootstrap,
+                        items: [
+                            {
+                                xtype: 'NavGroup',
+                                xns: Roo.bootstrap,
+                                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',
-                        listeners : {
-                            render : function()
-                            {
-                                this.store.load();
-                            }
+                        cls : 'table-fixed',
+                        rowSelection : true,
+                        footer : {
+                            xtype : 'PagingToolbar',
+                            pageSize : 25,
+                            xns : Roo.bootstrap,
+                            '|xns' : 'Roo.bootstrap'
                         },
                         store : {
                             xns : Roo.data,
@@ -201,30 +268,13 @@ Example.Nested = new Roo.XComponent({
                                     ['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'],
-                                    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
-                                    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
-                                    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
-                                    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
-                                    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
-                                    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
-                                    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
-                                    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
-                                    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
-                                    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
-                                    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
-                                    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
-                                    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
-                                    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
-                                    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
-                                    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
+                                    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'] 
                                 ]
                             },
                             reader : {
                            
                                 xns : Roo.data,
-                                '|xns' : 'Roo.data',
-                                xtype : 'Roo.data.ArrayReader',
+                                xtype : 'ArrayReader',
                                 fields: [
                                     {name: 'company'},
                                     {name: 'price', type: 'float'},
@@ -248,7 +298,7 @@ Example.Nested = new Roo.XComponent({
                             },
                             {
                                 header: "Price",
-                                width: 75,
+                               width: 160,
                                 sortable: true,
                                 renderer: Roo.util.Format.usMoney,
                                 dataIndex: 'price',