xns: Roo.bootstrap,
items: [
{
- xtype: 'Navbar',
+ xtype: 'NavHeaderbar',
xns: Roo.bootstrap,
bar: true,
position: 'static-top',
align: 'right',
items: [
{
- xtype: 'Item',
- xns: Roo.bootstrap.Navbar,
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
items: [
{
xtype: 'Element',
]
},
{
- xtype: 'Navbar',
+ xtype: 'NavSidebar',
xns: Roo.bootstrap,
sidebar: true,
items: [
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',
}
},
{
- 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'
]
}
]
- },
+ }
+ ]
+ },
+ {
+ xtype: 'Row',
+ xns: Roo.bootstrap,
+ cls: 'section btns',
+ items: [
{
xtype: 'Column',
xns: Roo.bootstrap,
]
}
]
+ },
+ {
+ 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'
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
}
]
}