view source

[roojs1] / examples / bootstrap / bootstrap.js

diff --git a/examples/bootstrap/bootstrap.js b/examples/bootstrap/bootstrap.js
index 68322ee..f706b6c 100644 (file)
--- a/examples/bootstrap/bootstrap.js
+++ b/examples/bootstrap/bootstrap.js
@@ -12,6 +12,7 @@ Roo.example.bootstrap = new Roo.XComponent({
     permname : '', 
     _tree : function()
     {
+        
         this.parent = {
             el : new Roo.bootstrap.Body(),
         }
@@ -25,30 +26,45 @@ Roo.example.bootstrap = new Roo.XComponent({
             xns: Roo.bootstrap,
             items : [
                  {
-                    xtype: 'Navbar',
+                    xtype: 'NavHeaderbar',
+                    xns: Roo.bootstrap,
+                    bar: true,
                     position : 'fixed-top',
                     inverse : true,
-                    collapse: true,
-                    contained: true,
-                    brand: '<a class="navbar-brand" href="#">Brand</a>',
-                    xns: Roo.bootstrap,
+                    brand: 'Brand',
                     items : [
                         {
                             xtype: 'NavGroup',
                             xns: Roo.bootstrap,
                             items: [
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
-                                    href: '#',
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     html: "hello",
-                                    badge: 'test',
-                                    active: true
+                                    menu:  {
+                                            xtype: 'Menu',
+                                            xns: Roo.bootstrap,
+                                            items : [
+                                                {
+                                                    xtype: 'MenuItem',
+                                                    xns: Roo.bootstrap,
+                                                    html: "hello aaa",
+                                                    href : 'http://roojs.com'
+                                                },
+                                                {
+                                                    xtype: 'MenuItem',
+                                                    xns: Roo.bootstrap,
+                                                    html: "hello",
+                                                    href : 'http://roojs.com'
+                                                }
+                                            ]
+                                        }
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     html: "hello",
+                                    active: true,
                                     menu:  {
                                             xtype: 'Menu',
                                             xns: Roo.bootstrap,
@@ -67,10 +83,24 @@ Roo.example.bootstrap = new Roo.XComponent({
                                                 }
                                             ]
                                         }
+                                }
+                            ]
+                        },
+                        {
+                            xtype: 'NavGroup',
+                            xns: Roo.bootstrap,
+                            align: 'right',
+                            items: [
+                                {
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
+                                    html: "hello",
+                                    badge: 'test',
+                                    active: true
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                    
                                     html: "dialog",
                                     listeners : {
@@ -86,7 +116,14 @@ Roo.example.bootstrap = new Roo.XComponent({
                                     xns: Roo.bootstrap,
                                     title : 'test1',
                                     html: "dialog"
-                                }
+                                },
+                                {
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
+                                    fa: 'search',
+                                    html: "dialog"
+                                    
+                                },
                             ]
                         }
                     ]
@@ -96,7 +133,7 @@ Roo.example.bootstrap = new Roo.XComponent({
                     xtype: 'Container',
                     xns: Roo.bootstrap,
                     jumbotron : true,
-                    style :  'padding: 30px 15px 40px',
+                    style :  'padding: 60px 15px 40px',
                     items: [
                         {
                             xtype: 'Container',
@@ -122,17 +159,37 @@ Roo.example.bootstrap = new Roo.XComponent({
                                     items : [
                                         
                                         {
-                                            xtype: 'Navbar',
+                                            xtype: 'PagingToolbar',
                                             xns: Roo.bootstrap,
+                                            
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            xtype: 'Row',
+                            xns: Roo.bootstrap,
+                            items : [
+                                
+                                {
+                                    xtype: 'Column',
+                                    xns: Roo.bootstrap,
+                                    colspan : 12,
+                                    items : [
+                                        
+                                        {
+                                            xtype: 'NavSimplebar',
+                                            xns: Roo.bootstrap,
+                                            bar: true,
                                             items : [
                                                 {
                                                     xtype: 'NavGroup',
                                                     xns: Roo.bootstrap,
-                                                    bar: true,
                                                     items : [
                                                         {
-                                                            xtype: 'Item',
-                                                            xns: Roo.bootstrap.Navbar,
+                                                            xtype: 'NavItem',
+                                                            xns: Roo.bootstrap,
                                                             html: "nav",
                                                             href : 'http://roojs.com',
                                                             
@@ -160,7 +217,25 @@ Roo.example.bootstrap = new Roo.XComponent({
                                                             }
                                                         }
                                                     ]
+                                                },
+                                                {
+                                                    
+                                                    xtype: 'Form',
+                                                    xns: Roo.bootstrap,
+                                                    items : [
+                                                        {
+                                                            xtype: 'Input',
+                                                            xns: Roo.bootstrap,
+                                                            name : 'testinput'
+                                                        },{
+                                                        
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            html : 'submit'
+                                                        }
+                                                    ]
                                                 }
+                                                
                                             ]    
                                         }
                                     ]
@@ -177,7 +252,20 @@ Roo.example.bootstrap = new Roo.XComponent({
                         {
                             xtype: 'Button',
                             xns : Roo.bootstrap,
-                            html: 'default'
+                            html: 'popover - default',
+                            items : [
+                                {
+                                    xtype: 'Popover',
+                                    xns: Roo.bootstrap,
+                                    title : "test popover",
+                                    html : "test content",
+                                    listeners : {
+                                        render : function(args) {
+                                            _this.popover = this;
+                                        }
+                                    }
+                                }
+                            ]
                         },
                          {
                             xtype: 'Button',
@@ -374,7 +462,44 @@ Roo.example.bootstrap = new Roo.XComponent({
                                     xtype: 'Input',
                                     xns: Roo.bootstrap,
                                     name : 'test',
-                                    fieldLabel : 'test'
+                                    fieldLabel : 'test - keyup',
+                                    
+                                    listeners : {
+                                        keyup : function() {
+                                            alert("Test");
+                                        }
+                                    }
+                                },
+                                {
+                                    xtype: 'Input',
+                                    xns: Roo.bootstrap,
+                                    name : 'test2',
+                                    fieldLabel : 'test - icon',
+                                    after : '@'
+                                    
+                                },
+                                {
+                                    xtype: 'ComboBox',
+                                    xns: Roo.bootstrap,
+                                    name : 'test',
+                                    fieldLabel : 'test',
+                                    displayField : 'state',
+                                    hiddenField: 'abbr',
+                                    hiddenName: 'testval',
+                                    mode : 'local',
+                                    store : {
+                                        xtype : 'SimpleStore',
+                                        xns : Roo.data,
+                                        fields: ['abbr', 'state'],
+                                        data : [ [ 'aa', 'aaa'] , ['bb', 'bbb'] ]
+                                    },
+                                    listeners : {
+                                        render : function(self)
+                                        {
+                                            _this.combo = self;
+                                        }
+                                    }
+    
                                 },
                                 {
                                     xtype: 'Button',
@@ -402,6 +527,15 @@ Roo.example.bootstrap = new Roo.XComponent({
                                     name : 'test',
                                     fieldLabel : 'test'
                                 },
+                                {
+                                          allowBlank : true,                
+                                    xtype: 'SecurePass',
+                                    inputType : 'password',
+                                    xns: Roo.bootstrap,
+                                    name : 'test1',
+                                    imageRoot : '/Pman/templates/images',
+                                    fieldLabel : 'test password'
+                                },
                                 {
                                     xtype: 'Button',
                                     xns: Roo.bootstrap,
@@ -458,25 +592,25 @@ Roo.example.bootstrap = new Roo.XComponent({
                                             xtype: 'Button',
                                             xns: Roo.bootstrap,
                                             html : ' ',
-                                            glyphicon: 'align-left'
+                                            fa: 'align-left'
                                         },
                                         {
                                             xtype: 'Button',
                                             xns: Roo.bootstrap,
                                             html : ' ',
-                                            glyphicon: 'align-center'
+                                            fa: 'align-center'
                                         },
                                         {
                                             xtype: 'Button',
                                             xns: Roo.bootstrap,
                                             html : ' ',
-                                            glyphicon: 'align-right'
+                                            fa: 'align-right'
                                         },
                                         {
                                             xtype: 'Button',
                                             xns: Roo.bootstrap,
                                             html : ' ',
-                                            glyphicon: 'align-justify'
+                                            fa: 'align-justify'
                                         }
                                     ]
                                 }