roojs-all.js

[roojs1] / examples / bootstrap / sample.js

diff --git a/examples/bootstrap/sample.js b/examples/bootstrap/sample.js
index b710266..28b04b9 100644 (file)
--- a/examples/bootstrap/sample.js
+++ b/examples/bootstrap/sample.js
@@ -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,97 +64,97 @@ 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',
                                     active: true,
                                     menu:  {
-                                            xtype: 'Menu',
-                                            xns: Roo.bootstrap,
-                                            type: 'submenu',
-                                            items : [
-                                                {
-                                                    xtype: 'MenuItem',
-                                                    xns: Roo.bootstrap,
-                                                    html: "User list",
-                                                    href : 'http://roojs.com'
-                                                },
-                                                {
-                                                    xtype: 'MenuItem',
-                                                    xns: Roo.bootstrap,
-                                                    html: "New user form",
-                                                    href : 'http://roojs.com'
-                                                },
-                                                {
-                                                    xtype: 'MenuItem',
-                                                    xns: Roo.bootstrap,
-                                                    html: "User profile",
-                                                    href : 'http://roojs.com'
-                                                }
-                                            ]
-                                        }
+                                        xtype: 'Menu',
+                                        xns: Roo.bootstrap,
+                                        type: 'submenu',
+                                        items : [
+                                            {
+                                                xtype: 'MenuItem',
+                                                xns: Roo.bootstrap,
+                                                html: "User list",
+                                                href : 'http://roojs.com'
+                                            },
+                                            {
+                                                xtype: 'MenuItem',
+                                                xns: Roo.bootstrap,
+                                                html: "New user form",
+                                                href : 'http://roojs.com'
+                                            },
+                                            {
+                                                xtype: 'MenuItem',
+                                                xns: Roo.bootstrap,
+                                                html: "User profile",
+                                                href : 'http://roojs.com'
+                                            }
+                                        ]
+                                    }
                                 },
                                 {
-                                    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'
@@ -508,7 +508,7 @@ Roo.example.bootstrap = new Roo.XComponent({
                                                         {
                                                             xtype: 'Button',
                                                             xns: Roo.bootstrap,
-                                                            cls:'btn-glow',
+                                                            theme: 'glow',
                                                             html: 'Icon button',
                                                             glyphicon: 'wrench'
                                                         },
@@ -593,66 +593,564 @@ Roo.example.bootstrap = new Roo.XComponent({
                                                         }
                                                     ]
                                                 },
+                                                {
+                                                    xtype: 'Header',
+                                                    xns: Roo.bootstrap,
+                                                    level: 4,
+                                                    html: 'Switch buttons',
+                                                    cls: 'title'
+                                                },
+                                                {
+                                                    xtype: 'Row',
+                                                    xns: Roo.bootstrap,
+                                                    cls: 'ctrls',
+                                                    items: [
+                                                        {
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            toggle: true,
+                                                            ontext: 'ON',
+                                                            offtext: 'OFF',
+                                                            defaulton: false
+                                                        },
+                                                        {
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            toggle: true,
+                                                            ontext: 'ON',
+                                                            offtext: 'OFF',
+                                                            defaulton: false,
+                                                            weight: 'primary'
+                                                        },
+                                                        {
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            toggle: true,
+                                                            ontext: 'ON',
+                                                            offtext: 'OFF',
+                                                            defaulton: false,
+                                                            weight: 'info'
+                                                        },
+                                                        {
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            toggle: true,
+                                                            ontext: 'ON',
+                                                            offtext: 'OFF',
+                                                            defaulton: false,
+                                                            weight: 'success'
+                                                        },
+                                                        {
+                                                            xtype: 'Button',
+                                                            xns: Roo.bootstrap,
+                                                            toggle: true,
+                                                            ontext: 'ON',
+                                                            offtext: 'OFF',
+                                                            defaulton: false,
+                                                            weight: 'danger'
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                },
+                                {
+                                    xtype: 'Row',
+                                    xns: Roo.bootstrap,
+                                    cls: 'section btns',
+                                    items: [
                                         {
-                                            xtype: 'Header',
+                                            xtype: 'Column',
                                             xns: Roo.bootstrap,
-                                            level: 4,
-                                            html: 'Switch buttons',
-                                            cls: 'title'
+                                            md: 6,
+                                            items: [
+                                                {
+                                                    xtype: 'Header',
+                                                    xns: Roo.bootstrap,
+                                                    level: 4,
+                                                    html: 'Glow Buttons',
+                                                    cls: 'title'
+                                                },
+                                                {
+                                                    xtype: 'Table',
+                                                    xns: Roo.bootstrap,
+                                                    items: [
+                                                        {
+                                                            xtype: 'TableBody',
+                                                            xns: Roo.bootstrap,
+                                                            items: [
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn-glow</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now',
+                                                                                    theme: 'glow'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn-glow.inverse</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now',
+                                                                                    theme: 'glow',
+                                                                                    inverse: true
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn-glow.primary</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now',
+                                                                                    theme: 'glow',
+                                                                                    weight: 'primary'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn-glow.success</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now',
+                                                                                    theme: 'glow',
+                                                                                    weight: 'success'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
+                                                }
+                                            ]
                                         },
                                         {
-                                            xtype: 'Row',
+                                            xtype: 'Column',
                                             xns: Roo.bootstrap,
-                                            cls: 'ctrls',
+                                            md: 5,
                                             items: [
                                                 {
-                                                    xtype: 'Button',
+                                                    xtype: 'Header',
                                                     xns: Roo.bootstrap,
-                                                    type: 'switch',
-                                                    ontext: 'ON',
-                                                    offtext: 'OFF',
-                                                    defaulton: false
+                                                    level: 4,
+                                                    html: 'Sliders',
+                                                    cls: 'title'
                                                 },
                                                 {
-                                                    xtype: 'Button',
+                                                    xtype: 'Container',
+                                                    xns: Roo.bootstrap,
+                                                    cls: 'sliders',
+                                                    items: [
+                                                        {
+                                                            xtype: 'Slider',
+                                                            xns: Roo.bootstrap,
+                                                            html: 'Sign up now',
+                                                            cls: 'btn-glow success'
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                },
+                                {
+                                    xtype: 'Row',
+                                    xns: Roo.bootstrap,
+                                    cls: 'section btns',
+                                    items: [
+                                        {
+                                            xtype: 'Column',
+                                            xns: Roo.bootstrap,
+                                            md: 6,
+                                            items: [
+                                                {
+                                                    xtype: 'Header',
+                                                    xns: Roo.bootstrap,
+                                                    level: 4,
+                                                    html: 'Bootstrap 3 buttons',
+                                                    cls: 'title'
+                                                },
+                                                {
+                                                    xtype: 'Table',
+                                                    xns: Roo.bootstrap,
+                                                    items: [
+                                                        {
+                                                            xtype: 'TableBody',
+                                                            xns: Roo.bootstrap,
+                                                            items: [
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn.btn-default</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn.btn-primary</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    weight: 'primary',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn.btn-success</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    weight: 'success',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn.btn-warning</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    weight: 'warning',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn.btn-info</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    weight: 'info',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    xtype: 'TableRow',
+                                                                    xns: Roo.bootstrap,
+                                                                    items: [
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            html: '<code>.btn.btn-danger</code>'
+                                                                        },
+                                                                        {
+                                                                            xtype: 'TableCell',
+                                                                            xns: Roo.bootstrap,
+                                                                            items: [
+                                                                                {
+                                                                                    xtype: 'Button',
+                                                                                    weight: 'danger',
+                                                                                    xns: Roo.bootstrap,
+                                                                                    html: 'Sign up now'
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            xtype: 'Column',
+                                            xns: Roo.bootstrap,
+                                            md: 5,
+                                            items: [
+                                                {
+                                                    xtype: 'Header',
                                                     xns: Roo.bootstrap,
-                                                    type: 'switch',
-                                                    ontext: 'ON',
-                                                    offtext: 'OFF',
-                                                    defaulton: false,
-                                                    weight: 'primary'
+                                                    level: 4,
+                                                    html: 'Bootstrap 3 buttons',
+                                                    cls: 'title'
                                                 },
                                                 {
-                                                    xtype: 'Button',
+                                                    xtype: 'Row',
                                                     xns: Roo.bootstrap,
-                                                    type: 'switch',
-                                                    ontext: 'ON',
-                                                    offtext: 'OFF',
-                                                    defaulton: false,
-                                                    weight: 'info'
+                                                    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: 'Button',
+                                                    xtype: 'Row',
                                                     xns: Roo.bootstrap,
-                                                    type: 'switch',
-                                                    ontext: 'ON',
-                                                    offtext: 'OFF',
-                                                    defaulton: false,
-                                                    weight: 'success'
+                                                    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: 'Button',
+                                                    xtype: 'Row',
                                                     xns: Roo.bootstrap,
-                                                    type: 'switch',
-                                                    ontext: 'ON',
-                                                    offtext: 'OFF',
-                                                    defaulton: false,
-                                                    weight: 'danger'
+                                                    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'
+                                                                            }
+                                                                        ]
+                                                                    }
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
                                                 }
                                             ]
                                         }
-                                            ]
-                                        }
                                     ]
                                 }
                             ]