roojs-all.js

[roojs1] / examples / bootstrap / bootstrap.js

diff --git a/examples/bootstrap/bootstrap.js b/examples/bootstrap/bootstrap.js
index ca7cfbd..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,73 +26,106 @@ Roo.example.bootstrap = new Roo.XComponent({
             xns: Roo.bootstrap,
             items : [
                  {
-                    xtype: 'Navbar',
-                    role : 'navigation',
-                    position : 'static-top',
+                    xtype: 'NavHeaderbar',
+                    xns: Roo.bootstrap,
                     bar: true,
+                    position : 'fixed-top',
                     inverse : true,
-                    xns: Roo.bootstrap,
+                    brand: 'Brand',
                     items : [
-                        
-                        {
-                            xtype: 'Item',
-                            xns: Roo.bootstrap.Navbar,
-                            href: '#',
-                            html: "hello",
-                            badge: 'test',
-                            active: true
-                        },
                         {
-                            xtype: 'Button',
+                            xtype: 'NavGroup',
                             xns: Roo.bootstrap,
-                            html: "hello",
-                            menu:  {
-                                    xtype: 'Menu',
+                            items: [
+                                {
+                                    xtype: 'NavItem',
                                     xns: Roo.bootstrap,
-                                    items : [
-                                        {
-                                            xtype: 'MenuItem',
+                                    html: "hello",
+                                    menu:  {
+                                            xtype: 'Menu',
                                             xns: Roo.bootstrap,
-                                            html: "hello aaa",
-                                            href : 'http://roojs.com'
-                                        },
-                                        {
-                                            xtype: 'MenuItem',
+                                            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: 'NavItem',
+                                    xns: Roo.bootstrap,
+                                    html: "hello",
+                                    active: true,
+                                    menu:  {
+                                            xtype: 'Menu',
                                             xns: Roo.bootstrap,
-                                            html: "hello",
-                                            href : 'http://roojs.com'
+                                            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: 'Button',
+                            xtype: 'NavGroup',
                             xns: Roo.bootstrap,
-                           
-                            html: "dialog",
-                            listeners : {
-                                click : function() {
-                                    Roo.ComponentMgr.get('test-modal-1').show()
-
-                                }
-                            }
-                            
-                        },
-                        
-                         {
-                            xtype: 'Modal',
-                            id: 'test-modal-1',
-                            xns: Roo.bootstrap,
-                            title : 'test1',
-                            html: "dialog"
-                            
-                            
-                        },
-                        
-                        
-                        
-                        
-                        
+                            align: 'right',
+                            items: [
+                                {
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
+                                    html: "hello",
+                                    badge: 'test',
+                                    active: true
+                                },
+                                {
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
+                                   
+                                    html: "dialog",
+                                    listeners : {
+                                        click : function() {
+                                            Roo.ComponentMgr.get('test-modal-1').show()
+                                        }
+                                    }
+                                    
+                                },
+                                {
+                                    xtype: 'Modal',
+                                    id: 'test-modal-1',
+                                    xns: Roo.bootstrap,
+                                    title : 'test1',
+                                    html: "dialog"
+                                },
+                                {
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
+                                    fa: 'search',
+                                    html: "dialog"
+                                    
+                                },
+                            ]
+                        }
                     ]
                     
                 },
@@ -99,8 +133,14 @@ Roo.example.bootstrap = new Roo.XComponent({
                     xtype: 'Container',
                     xns: Roo.bootstrap,
                     jumbotron : true,
-                     style :  'padding: 30px 15px 40px', 
-                    html : '<h1> hello world </h1><p>test</p>'
+                    style :  'padding: 60px 15px 40px',
+                    items: [
+                        {
+                            xtype: 'Container',
+                            xns: Roo.bootstrap,
+                            html: '<h1> hello world </h1><p>test</p>'
+                        }
+                    ]
                 },
                 {
                     xtype: 'Container',
@@ -119,39 +159,83 @@ 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: 'Item',
-                                                    xns: Roo.bootstrap.Navbar,
-                                                    html: "nav",
-                                                    href : 'http://roojs.com',
-                                                    
-                                                    menu:    {
-                                                        xtype: 'Menu',
-                                                        xns: Roo.bootstrap,
-                                                        items : [
-                                                            {
-                                                                xtype: 'MenuItem',
-                                                                xns: Roo.bootstrap,
-                                                                html: "hello",
-                                                                href : 'http://roojs.com'
-                                                            },
-                                                            {
-                                                                xtype: 'MenuSeparator',
-                                                                xns: Roo.bootstrap,
-                                                            },
-                                                            {
-                                                                xtype: 'MenuItem',
+                                                    xtype: 'NavGroup',
+                                                    xns: Roo.bootstrap,
+                                                    items : [
+                                                        {
+                                                            xtype: 'NavItem',
+                                                            xns: Roo.bootstrap,
+                                                            html: "nav",
+                                                            href : 'http://roojs.com',
+                                                            
+                                                            menu:    {
+                                                                xtype: 'Menu',
                                                                 xns: Roo.bootstrap,
-                                                                html: "hello",
-                                                                href: 'http://roojs.com'
-                                                            }   
-                                                        ]
-                                                    }
+                                                                items : [
+                                                                    {
+                                                                        xtype: 'MenuItem',
+                                                                        xns: Roo.bootstrap,
+                                                                        html: "hello",
+                                                                        href : 'http://roojs.com'
+                                                                    },
+                                                                    {
+                                                                        xtype: 'MenuSeparator',
+                                                                        xns: Roo.bootstrap,
+                                                                    },
+                                                                    {
+                                                                        xtype: 'MenuItem',
+                                                                        xns: Roo.bootstrap,
+                                                                        html: "hello",
+                                                                        href: 'http://roojs.com'
+                                                                    }   
+                                                                ]
+                                                            }
+                                                        }
+                                                    ]
+                                                },
+                                                {
+                                                    
+                                                    xtype: 'Form',
+                                                    xns: Roo.bootstrap,
+                                                    items : [
+                                                        {
+                                                            xtype: 'Input',
+                                                            xns: Roo.bootstrap,
+                                                            name : 'testinput'
+                                                        },{
+                                                        
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            html : 'submit'
+                                                        }
+                                                    ]
                                                 }
+                                                
                                             ]    
                                         }
                                     ]
@@ -168,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',
@@ -365,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',
@@ -393,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,
@@ -449,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'
                                         }
                                     ]
                                 }