examples/bootstrap/nested.html
[roojs1] / examples / bootstrap / nested.html
index 7ae79e2..43e0907 100644 (file)
@@ -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,23 +39,35 @@ Roo.namespace("Dashboard");
 .navbar {
     padding: 0;
 }
-
-.table-fixed thead {
-  width: 97%;
-}
-.table-fixed tbody {
-  height: 230px;
-  overflow-y: auto;
+/*
+.table-body-fixed tbody {
+   overflow-y: scroll;
   width: 100%;
 }
-.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
+.table-body-fixed  thead,
+.table-body-fixed  tbody,
+.table-body-fixed th   {
   display: block;
 }
-.table-fixed tbody td, .table-fixed thead > tr> th {
+.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">
 
@@ -87,7 +99,7 @@ Example.Nested = new Roo.XComponent({
                 titlebar: true,
                // collapsible: true,
                 minSize: 100,
-                maxSize: 400
+                maxSize: 500
             },
             north: {
                 xtype : 'Region',
@@ -147,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 : [
         
                                             ]
@@ -191,12 +209,44 @@ Example.Nested = new Roo.XComponent({
                                 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',
-                        
+                        cls : 'table-fixed',
+                        rowSelection : true,
+                        footer : {
+                            xtype : 'PagingToolbar',
+                            pageSize : 25,
+                            xns : Roo.bootstrap,
+                            '|xns' : 'Roo.bootstrap'
+                        },
                         store : {
                             xns : Roo.data,
                             xtype : 'Store',
@@ -218,23 +268,7 @@ 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 : {
@@ -264,7 +298,7 @@ Example.Nested = new Roo.XComponent({
                             },
                             {
                                 header: "Price",
-                                width: 75,
+                               width: 160,
                                 sortable: true,
                                 renderer: Roo.util.Format.usMoney,
                                 dataIndex: 'price',