examples/bootstrap4/bootstrap.html
authorAlan Knowles <alan@roojs.com>
Wed, 28 Nov 2018 07:06:56 +0000 (15:06 +0800)
committerAlan Knowles <alan@roojs.com>
Wed, 28 Nov 2018 07:06:56 +0000 (15:06 +0800)
examples/bootstrap4/calendar.html
examples/bootstrap4/ComboBox2.html
examples/bootstrap4/ComboBox.html
examples/bootstrap4/dashboard1.html
examples/bootstrap4/dashboard3.html
examples/bootstrap4/Editor.html
examples/bootstrap4/framed.html
examples/bootstrap4/homepage.html
examples/bootstrap4/htmleditor.html
examples/bootstrap4/LocationPicker.html
examples/bootstrap4/Login.html
examples/bootstrap4/modal.html
examples/bootstrap4/nested_dialog.html
examples/bootstrap4/nested.html
examples/bootstrap4/Numberbox.html
examples/bootstrap4/RadioSet.html
examples/bootstrap4/sample.html
examples/bootstrap4/TabPanel-ComboBox.html
examples/bootstrap4/test.html

20 files changed:
examples/bootstrap4/ComboBox.html [new file with mode: 0644]
examples/bootstrap4/ComboBox2.html [new file with mode: 0644]
examples/bootstrap4/Editor.html [new file with mode: 0644]
examples/bootstrap4/LocationPicker.html [new file with mode: 0644]
examples/bootstrap4/Login.html [new file with mode: 0644]
examples/bootstrap4/Numberbox.html [new file with mode: 0644]
examples/bootstrap4/RadioSet.html [new file with mode: 0644]
examples/bootstrap4/TabPanel-ComboBox.html [new file with mode: 0644]
examples/bootstrap4/bootstrap.html [new file with mode: 0644]
examples/bootstrap4/calendar.html [new file with mode: 0644]
examples/bootstrap4/dashboard1.html [new file with mode: 0644]
examples/bootstrap4/dashboard3.html [new file with mode: 0644]
examples/bootstrap4/framed.html [new file with mode: 0644]
examples/bootstrap4/homepage.html [new file with mode: 0644]
examples/bootstrap4/htmleditor.html [new file with mode: 0644]
examples/bootstrap4/modal.html [new file with mode: 0644]
examples/bootstrap4/nested.html [new file with mode: 0644]
examples/bootstrap4/nested_dialog.html [new file with mode: 0644]
examples/bootstrap4/sample.html [new file with mode: 0644]
examples/bootstrap4/test.html [new file with mode: 0644]

diff --git a/examples/bootstrap4/ComboBox.html b/examples/bootstrap4/ComboBox.html
new file mode 100644 (file)
index 0000000..1c85987
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap ComboBox Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap4/bootstrap.min.css">
+    
+        
+        
+    <link rel="stylesheet" href="../../css-bootstrap/roo-bootstrap-debug.css">        
+        
+        
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+      <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+
+  
+        
+    <!-- test code -->
+    <script type="text/javascript" src="ComboBox.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        var baseURL = '/web.eventmanager/demo.local.php';
+        var rootURL = '/web.eventmanager';
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/ComboBox2.html b/examples/bootstrap4/ComboBox2.html
new file mode 100644 (file)
index 0000000..a7e9306
--- /dev/null
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap ComboBox Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
+        
+    <link href="../../../bootswatch/AdminLTE-master/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
+    <link rel="stylesheet" href="../../css-bootstrap/select2.css">        
+    <link rel="stylesheet" href="../../css-bootstrap/combobox.css">     
+    <link rel="stylesheet" href="../../css-bootstrap/checkbox.css">
+        
+        
+        
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+    <!-- bootstrap js.. needs to compile it later.. -->
+    <script type="text/javascript" src="../../Roo/XComponent.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Component.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Body.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Container.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Column.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Navbar.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Navbar/Item.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Menu.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/MenuItem.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/MenuSeparator.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/bootstrap/NavGroup.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Row.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Button.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/ButtonGroup.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Img.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/bootstrap/Modal.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Form.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Input.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/bootstrap/TriggerField.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/ComboBox.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/ComboBox2.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Calendar.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/Popover.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/data/SortTypes.js"></script>
+    <script type="text/javascript" src="../../Roo/data/Record.js"></script>
+    <script type="text/javascript" src="../../Roo/data/Store.js"></script>
+    <script type="text/javascript" src="../../Roo/data/SimpleStore.js"></script>
+    <script type="text/javascript" src="../../Roo/data/JsonStore.js"></script>
+    <script type="text/javascript" src="../../Roo/data/Field.js"></script>
+    <script type="text/javascript" src="../../Roo/data/DataReader.js"></script>
+    <script type="text/javascript" src="../../Roo/data/DataProxy.js"></script>
+    <script type="text/javascript" src="../../Roo/data/MemoryProxy.js"></script>
+    <script type="text/javascript" src="../../Roo/data/HttpProxy.js"></script>
+    <script type="text/javascript" src="../../Roo/data/ScriptTagProxy.js"></script>
+    <script type="text/javascript" src="../../Roo/data/JsonReader.js"></script>
+    <script type="text/javascript" src="../../Roo/data/ArrayReader.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/form/VTypes.js"></script>
+    <script type="text/javascript" src="../../Roo/View.js"></script>
+        
+    <!-- test code -->
+    <script type="text/javascript" src="ComboBox2.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        var baseURL = '/web.eventmanager/demo.local.php';
+        var rootURL = '/web.eventmanager';
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/Editor.html b/examples/bootstrap4/Editor.html
new file mode 100644 (file)
index 0000000..a8e937e
--- /dev/null
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap - Editor Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+        
+    <link href="../../../bootswatch/AdminLTE-master/css/font-awesome.css" rel="stylesheet" type="text/css" /> 
+    <link rel="stylesheet" href="../../css-bootstrap/select2.css">        
+    <link rel="stylesheet" href="../../css-bootstrap/combobox.css">     
+    <link rel="stylesheet" href="../../css-bootstrap/checkbox.css">
+        
+        
+        
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+    <script type="text/javascript" src="../../roojs-bootstrap.js"></script>
+
+    <!-- bootstrap js.. needs to compile it later.. -->
+     
+    <!--
+    <script type="text/javascript" src="../../../Campaign/editor/Panel.js"></script>
+    <script type="text/javascript" src="../../../Campaign/editor/TextBlock.js"></script>
+    <script type="text/javascript" src="../../../Campaign/editor/ImageBlock.js"></script>
+    
+    <link rel="stylesheet" href="../../../Campaign/editor/editor.css">
+    -->
+    
+    
+    <!-- test code -->
+    <script type="text/javascript" src="Editor.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        Campaign = { Dialog : {} };
+        
+        var baseURL = '/web.campaign/index.local.php';
+        var rootURL = '/web.campaign';
+        
+        Roo.XComponent.hideProgress = true;
+        
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+        
+        Roo.XComponent.on('buildcomplete', function() {
+            Roo.Ajax.request({
+                url : baseURL + '/editor/data.php',
+                method: 'GET',
+                success : function(r)
+                {
+                    var res = Roo.decode(r.responseText);
+                    
+                    if(!res.success){
+                        return;
+                    }
+                    
+                    Roo.example.Editor.previewPanel.body().dom.innerHTML = res.data.email;
+                    
+                    Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-editable', true).elements, function(el){
+                        
+                        var target = el.attr('data-target');
+                        
+                        Roo.example.Editor[target] = new Roo.bootstrap.editor.TextBlock({ panel : 'thanks-email' }).render(el);
+                        
+                    })
+                    
+                    Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-image-editable', true).elements, function(el){
+                        
+                        var target = el.attr('data-target');
+                        
+                        Roo.example.Editor[target] = new Roo.bootstrap.editor.ImageBlock({ panel : 'thanks-email' }).render(el);
+                        Roo.example.Editor[target].parent = el;
+                        
+                        Roo.example.Editor[target].on('upload', function(){
+                            Campaign.Dialog.Images.show(
+                                {
+                                    onid : 237,
+                                    ontable : 'campaign_detail',
+                                    imgtype : target
+                                }, 
+                                function(){
+                                    Roo.Ajax.request({
+                                        url : baseURL + '/Roo/Images',
+                                        method: 'GET',
+                                        params: {
+                                            _preview : target,
+                                            onid : 237
+                                        },
+                                        success : function(r)
+                                        {
+                                            var res = Roo.decode(r.responseText);
+                                            
+                                            if(!res.success){
+                                                return;
+                                            }
+                                            
+                                            var width = Roo.example.Editor[target].parent.getWidth();
+                                            
+                                            Roo.example.Editor[target].setValue((baseURL + '/Images/Thumb/' + width + '/' + res.data.id));
+                                        }
+                                    });
+                                }
+                            );
+                        })
+                        
+                    })
+                    
+                    for ( var p in res.data.campaign.emails ){
+                        var f = res.data.campaign.emails[p];
+                        
+                        for (var d in f['message']){
+                            Roo.example.Editor[d].setValue(f['message'][d])
+                        }
+                        
+                        for (var d in f['image']){
+                            var width = Roo.example.Editor[d].parent.getWidth();
+                            Roo.example.Editor[d].setValue(baseURL + '/Images/Thumb/' + width + '/' + f['image'][d]);
+                        }
+                        
+                    }
+                    
+                }
+            });
+        });
+        
+
+        
+    </script>
+    
+    <script src="../../../Campaign/Campaign.Dialog.Images.js" type="text/javascript"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/LocationPicker.html b/examples/bootstrap4/LocationPicker.html
new file mode 100644 (file)
index 0000000..5ddc040
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap Location Picker Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+      <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+        
+      <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap.min.css">
+
+  
+        
+        
+    <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
+    
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+    <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/bootstrap/LocationPicker.js"></script>
+    
+    <!-- test code -->
+    <script type="text/javascript" src="LocationPicker.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/Login.html b/examples/bootstrap4/Login.html
new file mode 100644 (file)
index 0000000..ff71aca
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="bg-black">
+  <head>
+    <title>Html editor for bootstrap test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+        
+    <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap.min.css">
+        
+     <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css">   
+    <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
+     
+        
+        
+        
+    <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">
+        Dashboard = {};
+     </script>
+
+    <!-- test code -->
+    <script type="text/javascript" src="Login.js"></script>
+    
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+            Roo.XComponent.hideProgress = true;
+            Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/Numberbox.html b/examples/bootstrap4/Numberbox.html
new file mode 100644 (file)
index 0000000..8429af2
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap Numberbox Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+   <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 rel="stylesheet" href="/bootswatch/AdminLTE-master/css/AdminLTE.css">
+        
+    <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" src="../../Roo/bootstrap/dash/NumberBox.js"></script>
+<script type="text/javascript" src="../../Roo/bootstrap/dash/TabBox.js"></script>
+<script type="text/javascript" src="../../../../g.raphael/raphael-min.js"></script>
+    <script type="text/javascript" src="../../../../g.raphael/g.raphael.0.51.js"></script>
+<script type="text/javascript" src="../../../../g.raphael/g.bar.0.51.js"></script>
+<script type="text/javascript" src="../../../../g.raphael/g.pie.js"></script>
+
+
+
+        
+    <!-- test code -->
+    <script type="text/javascript" src="Numberbox.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        var baseURL = '/web.eventmanager/demo.local.php';
+        var rootURL = '/web.eventmanager';
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+
+    </script>
+  </body>
+</html>
diff --git a/examples/bootstrap4/RadioSet.html b/examples/bootstrap4/RadioSet.html
new file mode 100644 (file)
index 0000000..8af21ee
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="bg-black">
+  <head>
+    <title>Radio Set for bootstrap test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap-debug.css">
+    <link rel="stylesheet" href="../../css-bootstrap/font-awesome.css">
+    
+    <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>
+
+    <!-- test code -->
+    <script type="text/javascript" src="RadioSet.js"></script>
+    
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+            Roo.XComponent.hideProgress = true;
+            Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/TabPanel-ComboBox.html b/examples/bootstrap4/TabPanel-ComboBox.html
new file mode 100644 (file)
index 0000000..e56642c
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap TabPanel - ComboBox Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+       <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap-debug.css">
+    <link rel="stylesheet" href="../../css-bootstrap/font-awesome.css">
+        
+    <link href="../../../bootswatch/AdminLTE-master/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
+        
+        
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+        <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+
+        
+    <!-- test code -->
+    <script type="text/javascript" src="TabPanel-ComboBox.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        var baseURL = '/web.eventmanager/demo.local.php';
+        var rootURL = '/web.eventmanager';
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/bootstrap.html b/examples/bootstrap4/bootstrap.html
new file mode 100644 (file)
index 0000000..9baaae3
--- /dev/null
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <!-- Bootstrap -->
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap/roojs-bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css">
+    
+    <script type="text/javascript" src="../../roojs-debug.js"></script>
+    
+    <!-- bootstrap js.. needs to compile it later.. -->
+    <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+     
+    
+    <!-- test code -->
+    <script type="text/javascript" src="bootstrap.js"></script>
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+        Roo.XComponent.hideProgress = true;
+          Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/calendar.html b/examples/bootstrap4/calendar.html
new file mode 100644 (file)
index 0000000..a7dd2c7
--- /dev/null
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+      <link rel="stylesheet" type="text/css" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap/roojs-bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css">
+    
+    <script type="text/javascript" src="../../roojs-debug.js"></script>
+    
+    <!-- bootstrap js.. needs to compile it later.. -->
+    <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+        
+    <!-- test code -->
+    <script type="text/javascript" src="calendar.js"></script>
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+          Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/dashboard1.html b/examples/bootstrap4/dashboard1.html
new file mode 100644 (file)
index 0000000..c61d470
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Html editor for bootstrap test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css">   
+    
+    <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
+    
+    <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
+        
+    <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">
+        Dashboard = {};
+     </script>
+
+    <!-- test code -->
+    <script type="text/javascript" src="Dashboard.Header1.js"></script>
+    <script type="text/javascript" src="Dashboard.Sidebar2.js"></script>
+    <script type="text/javascript" src="dashboard1.js"></script>
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+          Roo.XComponent.hideProgress = true;
+          Roo.XComponent.build();
+          Roo.bootstrap.Tooltip.init();
+      });
+    </script>
+  </body>
+</html>
+<script type="text/javascript" src="../../Roo/bootstrap/dash/TabBox.js"></script>
\ No newline at end of file
diff --git a/examples/bootstrap4/dashboard3.html b/examples/bootstrap4/dashboard3.html
new file mode 100644 (file)
index 0000000..0ad100b
--- /dev/null
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Html editor for bootstrap test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.css">
+        
+    <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css">   
+    <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
+    
+        <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
+
+
+   <style>
+    /* for testing carosell navigation */
+     .carousel-control
+     {
+        left: -18px;
+        top:30px;
+        width:5%;
+        color: #000;
+        
+     }
+    .carousel-control.left
+    {
+        background-image: none;
+    }
+    .carousel-control.right
+    {
+        right: -30px; 
+        background-image : none;
+    }
+     
+   </style>     
+        
+        
+    <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">
+        Dashboard = {};
+     </script>
+
+    <!-- test code -->
+    <script type="text/javascript" src="Dashboard.Header1.js"></script>
+    <script type="text/javascript" src="Dashboard.Sidebar2.js"></script>
+    <script type="text/javascript" src="dashboard3.js"></script>
+    <script type="text/javascript" src="dashboard3.slidetest.js"></script>
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+          Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/framed.html b/examples/bootstrap4/framed.html
new file mode 100644 (file)
index 0000000..8ffcead
--- /dev/null
@@ -0,0 +1,130 @@
+<!--
+
+just a html scratch pad to see how the layout might look..
+
+Conclusion
+Tab panels are ok in bootstrap - and we can use them
+however the layout stuff is pretty borked, as it was not really designed for a framed layout
+
+looking at porting the roo code for this purpose..
+
+
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Framed layouts for bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+       
+    <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css">   
+    <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
+    
+    <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
+    
+    
+    
+        
+    <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>
+    
+    <style>
+        /**
+          css modifications that might be needed...
+        */
+        
+        body > .header {
+            overflow: hidden;
+        }
+        .navbar ul.nav-tabs {
+            margin-top: 9px;
+            display: table;
+        }
+        
+    </style>
+    
+    
+     <script type="text/javascript">
+        Dashboard = {};
+     </script>
+
+    <!-- test code -->
+    
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+          //Roo.XComponent.build();
+          //Roo.bootstrap.Tooltip.init();
+      });
+    </script>
+    
+    <header class=" header" id="roo-comp-1010">
+        <a href="#" id="roo-comp-1012" class="logo">Example</a>
+        <nav class="navbar navbar-default navbar-static-top" role="navigation" id="roo-comp-1014">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" id="roo-gen23">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+            </div>
+            <div class="collapse navbar-collapse" id="roo-gen26">
+                <ul class="nav nav-tabs" role="tablist">
+                    <li class="active"><a href="#home"">CRM</a></li>
+                    <li ><a href="#profile" >Document manager</a></li>
+                    <li ><a href="#messages">Content Manager</a></li>
+                    <li ><a href="#settings">Accounts</a></li>
+                    <li ><a href="#settings">Accounts</a></li>
+                    <li ><a href="#settings">MTrack</a></li>
+                    <li ><a href="#settings">Git</a></li>
+                    <li ><a href="#settings">Admin</a></li>
+                    <li ><a href="#settings">Logs</a></li>
+                  </ul>
+            </div>
+            <div class="x-dlg-mask" id="roo-gen25" style="width: 1497px; height: 50px; display: none;"></div>
+        </nav>
+    </header>
+    
+    <div class="tab-content">
+        <div role="tabpanel" class="tab-pane active" id="home">
+        <aside class=" left-side sidebar-offcanvas" id="roo-comp-1030"><div class="sidebar sidebar-nav" id="roo-comp-1032"><div class="x-dlg-mask" id="roo-gen40" style="width: 220px; height: 1px; display: none;"></div><ul class="dashboard-menu sidebar-menu" id="roo-comp-1034"><li class=" open x-open dropdown-toggle" id="roo-comp-1036"><a href="#" class="dropdown-toggle treeview"><i class="fa fa-bar-chart-o"></i><span>test</span><i class="glyphicon glyphicon-chevron-down pull-right"></i></a><ul class="treeview-menu" style="z-index:1000" id="roo-comp-1038"><li class="treeview-menu" id="roo-comp-1040"><a href="#" id="roo-gen46"><span>test</span></a></li><li class="treeview-menu" id="roo-comp-1042"><a href="#" id="roo-gen47"><span>test</span></a></li><li class="treeview-menu" id="roo-comp-1044"><a href="#" id="roo-gen48"><span>test aaa</span></a></li></ul></li><li class="" id="roo-comp-1046"><a href="#" class=""><span>test</span><span class="badge pull-right badge-default" id="roo-gen51">new</span></a></li></ul></div></aside>
+        <!-- this is a sub module.... -->
+        <header class=" header" id="roo-comp-1010">
+             <nav class="navbar navbar-default navbar-static-top" role="navigation" id="roo-comp-1014">
+                
+                <div class="collapse navbar-collapse" id="roo-gen26">
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li class="active"><a href="#home"">CRM</a></li>
+                        <li ><a href="#profile" >Document manager</a></li>
+                        <li ><a href="#messages">Content Manager</a></li>
+                        <li ><a href="#settings">Accounts</a></li>
+                        <li ><a href="#settings">Accounts</a></li>
+                        <li ><a href="#settings">MTrack</a></li>
+                        <li ><a href="#settings">Git</a></li>
+                        <li ><a href="#settings">Admin</a></li>
+                        <li ><a href="#settings">Logs</a></li>
+                      </ul>
+                </div>
+                <div class="x-dlg-mask" id="roo-gen25" style="width: 1497px; height: 50px; display: none;"></div>
+            </nav>
+        </header>
+        
+     </div>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  </body>
+</html>
diff --git a/examples/bootstrap4/homepage.html b/examples/bootstrap4/homepage.html
new file mode 100644 (file)
index 0000000..4ba66e0
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap Numberbox Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap.css">
+
+         
+    <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
+      <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css">   
+
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+
+    <!-- bootstrap js.. needs to compile it later.. -->
+    
+   
+   <!--  <link href="http://localhost/bootswatch/Progressus/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  -->
+
+    <link href="http://localhost/bootswatch/Progressus/assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css" /> 
+    <link href="http://localhost/bootswatch/Progressus/assets/css/main-cls.css" rel="stylesheet" type="text/css" /> 
+    <!--   <link href="http://localhost/bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" /> -->
+
+        
+    <!-- test code -->
+    <script type="text/javascript" src="homepage.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        var baseURL = '/web.eventmanager/demo.local.php';
+        var rootURL = '/web.eventmanager';
+        Roo.onReady(function() {
+            Roo.XComponent.build();
+        });
+
+    </script>
+  </body>
+</html>
diff --git a/examples/bootstrap4/htmleditor.html b/examples/bootstrap4/htmleditor.html
new file mode 100644 (file)
index 0000000..7200b1d
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Html editor for bootstrap test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+        
+      <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap.min.css">
+
+        
+        
+        
+    <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>
+    
+    
+
+    <!-- test code -->
+    <script type="text/javascript" src="htmleditor.js"></script>
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+          Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/modal.html b/examples/bootstrap4/modal.html
new file mode 100644 (file)
index 0000000..2d55a59
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+        
+    <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap.min.css">
+        
+     <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css"> 
+         
+        
+        
+    <script type="text/javascript" src="../../roojs-core-debug.js"></script>
+    <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+   
+        
+    <!-- test code -->
+    <script type="text/javascript" src="modal.js"></script>
+  </head>
+  
+  <body id="body">
+    <script type="text/javascript">
+        var baseURL = '/web.eventmanager/demo.local.php';
+      Roo.onReady(function() {
+          Roo.XComponent.build();
+          Roo.XComponent.on('buildcomplete', function() {
+            Roo.example.modal.el.show();
+          });
+      });
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/nested.html b/examples/bootstrap4/nested.html
new file mode 100644 (file)
index 0000000..43e0907
--- /dev/null
@@ -0,0 +1,389 @@
+<!--
+
+porting tst for layout classes from original roo library into bootstrap one.
+
+
+-->
+<html>
+<head>
+  <title>Nested Layout</title>
+  
+   <!-- Bootstrap -->
+    <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"> -->
+
+    
+        
+    <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">
+
+Roo.namespace("Dashboard");
+    </script>
+     
+         <script type="text/javascript" src="Dashboard.Header1.js"></script>
+<script type="text/javascript" src="./nested-dialog.js"></script>
+     
+     
+     
+    <style type="text/css">
+.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">
+
+Roo.namespace("Example");
+
+Example.Nested = new Roo.XComponent({
+    part     :  ["example", "nested" ],
+    order    : '001-Example-Nested',
+    region   : 'center',
+    parent   : false,
+    name     : "unnamed module",
+    disabled : false, 
+    permname : '', 
+    _tree : function()
+    {
+        var _this = this;
+        var MODULE = this;
+        return {
+            is_root : true,
+            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,
+                overflow : 'visible',
+                
+                initialSize: 50,
+                titlebar: false
+               
+            },
+            center: {
+                xtype : 'Region',
+                xns: Roo.bootstrap.layout,
+                autoScroll: false,
+                tabPosition:'top',
+                 titlebar: true
+            },
+            items : [
+                {
+                    xtype : 'Content',
+                    xns: Roo.bootstrap.panel,
+                    title : "Title west" ,
+                    fitToFrame:true,
+                    closable:false,
+                    region : 'north',
+                    items : [
+                        {
+                            bar : true,
+                            position : 'static-top',
+                            xtype : 'NavHeaderbar',
+                            tag : 'nav',
+                            xns : Roo.bootstrap,
+                            items : [
+                                {
+                                    cls : 'navbar-btn sidebar-toggle',
+                                    xtype : 'Link',
+                                    xns : Roo.bootstrap,
+                                    html : '<span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span>'
+                                },
+                                {
+                                    xtype : 'NavGroup',
+                                    align : 'right',
+                                    xns : Roo.bootstrap,
+                                    items : [
+                                        {
+                                            menu : {
+                                                xtype : 'Menu',
+                                                xns : Roo.bootstrap,
+                                                items : [
+                                                    {
+                                                        xtype : 'MenuItem',
+                                                        xns : Roo.bootstrap,
+                                                        html : 'test'
+                                                    }
+                                                ]
+        
+                                            },
+                                            xtype : 'NavItem',
+                                            xns : Roo.bootstrap,
+                                            listeners : {
+                                                click : function()
+                                                {
+                                                    Example.NestedDialog.show({});
+                                                }
+                                            },
+                                            html : 'test dialog',
+                                            items : [
+        
+                                            ]
+        
+                                        },
+                                        {
+                                            xtype : 'NavItem',
+                                            xns : Roo.bootstrap,
+                                            html : 'test'
+                                        }
+                                    ]
+        
+                                }
+                            ]
+        
+                        }
+                    ]
+                    
+                },
+             
+                {
+                    xtype : 'Content',
+                    xns: Roo.bootstrap.panel,
+                    title : "Title west" ,
+                    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);
+                            }
+                        },
+                    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',
+                         
+                            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,
+                    title : "Title Center",
+                    fitToFrame:true,
+                    closable:false,
+                    region : 'center',
+                    html : 'some body center'
+                    
+                },
+                
+                {
+                    xtype : 'Nest',
+                    title : "Title Nest Center",
+                    
+                    xns: Roo.bootstrap.panel,
+                    region : 'center',
+                    
+                    layout : {
+                        xtype : 'Border',
+                        xns: Roo.bootstrap.layout,
+                        south: {
+                            xtype : 'Region',
+                            xns: Roo.bootstrap.layout,
+                               split:true,
+                               initialSize: 200,
+                               minSize: 100,
+                               maxSize: 400,
+                               autoScroll:true,
+                               collapsible:true,
+                               titlebar: true
+                           },
+                           center: {
+                            xtype : 'Region',
+                            xns: Roo.bootstrap.layout,
+                               autoScroll:true,
+                           },
+                        items : [
+                            {
+                                xtype : 'Content',
+                                xns: Roo.bootstrap.panel,
+                                title : "More Info",
+                                region : 'south',
+                                html : 'some body south'
+                            },
+                            {
+                                xtype : 'Content',
+                                xns: Roo.bootstrap.panel,
+                                title : "the body",
+                                region : 'center',
+                                html : 'some body center'
+                            },
+                        ]
+                    }
+                
+                    
+                }
+                 
+            ]   
+            
+        }
+    }
+});
+  
+   Roo.onReady(function() {
+        Roo.XComponent.is_alt = true;
+          Roo.XComponent.build();
+          //dRoo.bootstrap.Tooltip.init();
+      });
+  
+       </script>
+</head>
+<body class="xtheme-gray">
+
+ </body>
+</html>
diff --git a/examples/bootstrap4/nested_dialog.html b/examples/bootstrap4/nested_dialog.html
new file mode 100644 (file)
index 0000000..6fe86ad
--- /dev/null
@@ -0,0 +1,104 @@
+<!--
+
+porting tst for layout classes from original roo library into bootstrap one.
+
+
+-->
+<html>
+<head>
+  <title>Nested Layout</title>
+  
+   <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.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"> -->
+
+    
+        
+    <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" src="../../Roo/bootstrap/Modal.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/panel/Tabs.js"></script>
+
+    <script type="text/javascript" src="../../Roo/bootstrap/layout/Border.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/layout/Region.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap/layout/Center.js"></script>
+
+    <script type="text/javascript" src="../../Roo/bootstrap/panel/Content.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/bootstrap//Table.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap//Table/AbstractSelectionModel.js"></script>
+    <script type="text/javascript" src="../../Roo/bootstrap//Table/RowSelectionModel.js"></script>
+    
+    <script type="text/javascript" src="../../Roo/bootstrap/panel/Grid.js"></script>
+    
+    
+    <script type="text/javascript" src="../../Roo/bootstrap/Input.js"></script>
+    
+    
+    
+    <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>
+     
+     
+     
+    <style type="text/css">
+.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">
+
+Roo.namespace("Example");
+   Roo.onReady(function() {
+        Roo.XComponent.is_alt = true;
+        Example.NestedDialog.show();
+          //dRoo.bootstrap.Tooltip.init();
+      });
+  
+       </script>
+</head>
+<body class="xtheme-gray">
+
+ </body>
+</html>
diff --git a/examples/bootstrap4/sample.html b/examples/bootstrap4/sample.html
new file mode 100644 (file)
index 0000000..31bc174
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Bootstrap -->
+   <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css-bootstrap/roojs-bootstrap-debug.css">
+    <link rel="stylesheet" href="../../css-bootstrap/font-awesome.css">
+    
+      
+    
+    <script type="text/javascript" src="../../roojs-debug.js"></script>
+     
+    <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+    
+
+    
+    <script type="text/javascript" src="sample.js"></script>
+    
+  </head>
+  <body id="body">
+   
+
+  </body>
+  <script type="text/javascript">
+    Roo.onReady(function() {
+        Roo.XComponent.hideProgress = true;
+        Roo.XComponent.build();
+    });
+</script>
+</html>
\ No newline at end of file
diff --git a/examples/bootstrap4/test.html b/examples/bootstrap4/test.html
new file mode 100644 (file)
index 0000000..539e888
--- /dev/null
@@ -0,0 +1,104 @@
+<html>
+<head>
+  <title>Nested Layout</title>
+  
+   <!-- Bootstrap -->
+    <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.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">
+    
+        
+    <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">
+
+    Roo.namespace("Dashboard");
+    </script>
+     
+         <script type="text/javascript" src="Dashboard.Header1.js"></script>
+
+     
+     
+     
+    <style type="text/css">
+
+        </style>
+    <script type="text/javascript">
+
+    Roo.namespace("Example");
+
+    Example.Nested = new Roo.XComponent({
+        part     :  ["example", "nested" ],
+        order    : '001-Example-Nested',
+        region   : 'center',
+        parent   : false,
+        name     : "unnamed module",
+        disabled : false, 
+        permname : '', 
+        _tree : function()
+        {
+            var _this = this;
+            var MODULE = this;
+            return {
+                is_root : true,
+                xtype : 'Border',
+                xns : Roo.bootstrap.layout,
+                el : document.body, // border layout can be applied to the outer one...
+                center: {
+                    xtype : 'Region',
+                    xns: Roo.bootstrap.layout,
+                    autoScroll: false,
+                    tabPosition:'top',
+                    titlebar: true
+                },
+                items : [
+
+
+                /*
+                    {
+                    xtype : 'Content',
+                    xns: Roo.bootstrap.panel,
+                    title : "Title Center",
+                    fitToFrame:true,
+                    closable:false,
+                    region : 'center',
+                    html : 'some body center'
+                    },
+                    {
+                    xtype : 'Content',
+                    xns: Roo.bootstrap.panel,
+                    title : "Title Center",
+                    fitToFrame:true,
+                    closable:false,
+                    region : 'center',
+                    html : 'some body center'
+                    }
+                */
+                //s1
+                    {
+                        
+                    }
+                ]
+            }
+        }
+    });
+
+   Roo.onReady(function() {
+        Roo.XComponent.is_alt = true;
+          Roo.XComponent.build();
+          //dRoo.bootstrap.Tooltip.init();
+      });
+  
+    </script>
+</head>
+<body class="xtheme-gray">
+
+ </body>
+</html>
\ No newline at end of file