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: 'Button',
xns: Roo.bootstrap,
- cls:'btn-glow',
+ theme: 'glow',
html: 'Icon button',
glyphicon: 'wrench'
},
{
xtype: 'Button',
xns: Roo.bootstrap,
- type: 'switch',
+ toggle: true,
ontext: 'ON',
offtext: 'OFF',
defaulton: false
{
xtype: 'Button',
xns: Roo.bootstrap,
- type: 'switch',
+ toggle: true,
ontext: 'ON',
offtext: 'OFF',
defaulton: false,
{
xtype: 'Button',
xns: Roo.bootstrap,
- type: 'switch',
+ toggle: true,
ontext: 'ON',
offtext: 'OFF',
defaulton: false,
{
xtype: 'Button',
xns: Roo.bootstrap,
- type: 'switch',
+ toggle: true,
ontext: 'ON',
offtext: 'OFF',
defaulton: false,
{
xtype: 'Button',
xns: Roo.bootstrap,
- type: 'switch',
+ toggle: true,
ontext: 'ON',
offtext: 'OFF',
defaulton: false,
{
xtype: 'Column',
xns: Roo.bootstrap,
- md: 5,
+ md: 6,
items: [
{
xtype: 'Header',
{
xtype: 'Button',
xns: Roo.bootstrap,
- html: 'a',
- cls: 'btn-glow'
+ 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: 'Column',
+ xns: Roo.bootstrap,
+ md: 5,
+ items: [
+ {
+ xtype: 'Header',
+ xns: Roo.bootstrap,
+ level: 4,
+ html: 'Sliders',
+ cls: 'title'
+ },
+ {
+ 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,
+ 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'
+ }
+ ]
+ }
}
]
}