fix attribute
[roojs1] / examples / bootstrap / sample.js
index ef74380..28b04b9 100644 (file)
@@ -24,7 +24,7 @@ Roo.example.bootstrap = new Roo.XComponent({
             xns: Roo.bootstrap,
             items: [
                 {
-                    xtype: 'Navbar',
+                    xtype: 'NavHeaderbar',
                     xns: Roo.bootstrap,
                     bar: true,
                     position: 'static-top',
@@ -38,8 +38,8 @@ Roo.example.bootstrap = new Roo.XComponent({
                             align: 'right',
                             items: [
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     items: [
                                         {
                                             xtype: 'Element',
@@ -55,7 +55,7 @@ Roo.example.bootstrap = new Roo.XComponent({
                     ]
                 },
                 {
-                    xtype: 'Navbar',
+                    xtype: 'NavSidebar',
                     xns: Roo.bootstrap,
                     sidebar: true,
                     items: [
@@ -64,22 +64,22 @@ Roo.example.bootstrap = new Roo.XComponent({
                             xns: Roo.bootstrap,
                             items: [
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'home',
                                     html: 'Hello'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'stats',
                                     html: 'Charts'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'user',
                                     html: 'Users',
@@ -111,50 +111,50 @@ Roo.example.bootstrap = new Roo.XComponent({
                                     }
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'edit',
                                     html: 'Forms'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'picture',
                                     html: 'Gallery'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'calendar',
                                     html: 'Calendar'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'th-large',
                                     html: 'Tables'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'flash',
                                     html: 'UI Elements'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'cog',
                                     html: 'My Info'
                                 },
                                 {
-                                    xtype: 'Item',
-                                    xns: Roo.bootstrap.Navbar,
+                                    xtype: 'NavItem',
+                                    xns: Roo.bootstrap,
                                     href: '#',
                                     glyphicon: 'share-alt',
                                     html: 'Extras'
@@ -807,7 +807,14 @@ Roo.example.bootstrap = new Roo.XComponent({
                                                     ]
                                                 }
                                             ]
-                                        },
+                                        }
+                                    ]
+                                },
+                                {
+                                    xtype: 'Row',
+                                    xns: Roo.bootstrap,
+                                    cls: 'section btns',
+                                    items: [
                                         {
                                             xtype: 'Column',
                                             xns: Roo.bootstrap,
@@ -970,6 +977,179 @@ Roo.example.bootstrap = new Roo.XComponent({
                                                     ]
                                                 }
                                             ]
+                                        },
+                                        {
+                                            xtype: 'Column',
+                                            xns: Roo.bootstrap,
+                                            md: 5,
+                                            items: [
+                                                {
+                                                    xtype: 'Header',
+                                                    xns: Roo.bootstrap,
+                                                    level: 4,
+                                                    html: 'Bootstrap 3 buttons',
+                                                    cls: 'title'
+                                                },
+                                                {
+                                                    xtype: 'Row',
+                                                    xns: Roo.bootstrap,
+                                                    cls: 'ctrls',
+                                                    items: [
+                                                        {
+                                                            xtype: 'Element',
+                                                            xns: Roo.bootstrap,
+                                                            cls: 'dropdown',
+                                                            items: [
+                                                                {
+                                                                    xtype: 'Element',
+                                                                    xns: Roo.bootstrap,
+                                                                    tag: 'ul',
+                                                                    cls: 'dropdown-menu',
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'Element',
+                                                                            xns: Roo.bootstrap,
+                                                                            tag: 'li',
+                                                                            cls: 'dropdown-header',
+                                                                            html: 'Dropdown header'
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        },
+                                                        {
+                                                            xtype: 'ButtonGroup',
+                                                            xns: Roo.bootstrap,
+                                                            items: [
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: '1'
+                                                                },
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: '2'
+                                                                },
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: '3'
+                                                                },
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: 'Dropdown',
+                                                                    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 aaa",
+                                                                                href : 'http://roojs.com'
+                                                                            },
+                                                                            {
+                                                                                xtype: 'MenuItem',
+                                                                                xns: Roo.bootstrap,
+                                                                                html: "hello aaa",
+                                                                                href : 'http://roojs.com'
+                                                                            }
+                                                                        ]
+                                                                    }
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
+                                                },
+                                                {
+                                                    xtype: 'Row',
+                                                    xns: Roo.bootstrap,
+                                                    cls: 'ctrls',
+                                                    items: [
+                                                        {
+                                                            xtype: 'NavSimplebar',
+                                                            xns: Roo.bootstrap,
+                                                            bar: false,
+                                                            type: 'tabs',
+                                                            items: [
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: 'Home',
+                                                                    active: true
+                                                                },
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: 'Profile',
+                                                                    active: true
+                                                                },
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: 'Messages',
+                                                                    active: true
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
+                                                },
+                                                {
+                                                    xtype: 'Row',
+                                                    xns: Roo.bootstrap,
+                                                    cls: 'ctrls',
+                                                    items: [
+                                                        {
+                                                            xtype: 'ButtonGroup',
+                                                            xns: Roo.bootstrap,
+                                                            items: [
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: 'Action'
+                                                                },
+                                                                {
+                                                                    xtype: 'Button',
+                                                                    xns: Roo.bootstrap,
+                                                                    html: 'Action',
+                                                                    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 aaa",
+                                                                                href : 'http://roojs.com'
+                                                                            },
+                                                                            {
+                                                                                xtype: 'MenuItem',
+                                                                                xns: Roo.bootstrap,
+                                                                                html: "hello aaa",
+                                                                                href : 'http://roojs.com'
+                                                                            }
+                                                                        ]
+                                                                    }
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
+                                                }
+                                            ]
                                         }
                                     ]
                                 }