]
}
]
- },
- {
- "String cls" : "box box-danger",
- "xtype" : "Container",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "String cls" : "box-header",
- "xtype" : "Container",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "String cls" : "box-title",
- "xtype" : "Header",
- "$ xns" : "Roo.bootstrap",
- "Number level" : 3,
- "String html" : "Different Width"
- }
- ]
- },
- {
- "xtype" : "Form",
- "String labelAlign" : "top",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "String cls" : "box-body",
- "xtype" : "Container",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "xtype" : "Row",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "Number md" : 3,
- "xtype" : "Input",
- "string placeholder" : "md 3",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md"
- },
- {
- "Number md" : 3,
- "xtype" : "Input",
- "string placeholder" : "md 4",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md"
- },
- {
- "Number md" : 5,
- "xtype" : "Input",
- "string placeholder" : "md 3",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md"
- }
- ]
- }
- ]
- }
- ]
- }
- ]
- },
- {
- "String cls" : "box box-info",
- "xtype" : "Container",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "String cls" : "box-header",
- "xtype" : "Container",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "String cls" : "box-title",
- "xtype" : "Header",
- "$ xns" : "Roo.bootstrap",
- "Number level" : 3,
- "String html" : "Input Addon"
- }
- ]
- },
- {
- "xtype" : "Form",
- "String labelAlign" : "top",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "String cls" : "box-body",
- "xtype" : "Container",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "xtype" : "Input",
- "string placeholder" : "before : @",
- "$ xns" : "Roo.bootstrap",
- "string before" : "@",
- "string size" : "md"
- },
- {
- "xtype" : "Input",
- "string placeholder" : "after: .00",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md",
- "string after" : 0
- },
- {
- "xtype" : "Input",
- "string placeholder" : "before $, after: .00",
- "$ xns" : "Roo.bootstrap",
- "string before" : "$",
- "string size" : "md",
- "string after" : 0
- },
- {
- "xtype" : "Header",
- "Number level" : 4,
- "$ xns" : "Roo.bootstrap",
- "String html" : "With Icons"
- },
- {
- "xtype" : "Input",
- "string placeholder" : "before : <i class="fa fa-envelope"></i>",
- "$ xns" : "Roo.bootstrap",
- "string before" : "<i class=\"fa fa-envelope\"></i>",
- "string size" : "md"
- },
- {
- "xtype" : "Input",
- "string placeholder" : "after : <i class="fa fa-after"></i>",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md",
- "string after" : "<i class=\"fa fa-check\"></i>"
- },
- {
- "xtype" : "Input",
- "string placeholder" : "after : <i class="fa fa-ambulance"></i> before : <i class="fa fa-dollar"></i>",
- "$ xns" : "Roo.bootstrap",
- "string before" : "<i class=\"fa fa-dollar\"></i>",
- "string size" : "md",
- "string after" : "<i class=\"fa fa-ambulance\"></i>"
- },
- {
- "xtype" : "Header",
- "$ xns" : "Roo.bootstrap",
- "Number level" : 4,
- "String html" : "With checkbox and radio"
- },
- {
- "xtype" : "Row",
- "$ xns" : "Roo.bootstrap",
- "items" : [
- {
- "Number md" : 6,
- "xtype" : "Input",
- "string placeholder" : "?",
- "$ xns" : "Roo.bootstrap",
- "string before" : "fixme",
- "string size" : "md"
- },
- {
- "Number md" : 6,
- "xtype" : "Input",
- "string placeholder" : "md 4",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md"
- }
- ]
- },
- {
- "xtype" : "Header",
- "Number level" : 4,
- "$ xns" : "Roo.bootstrap",
- "String html" : "With buttons"
- },
- {
- "xtype" : "Input",
- "string placeholder" : "before : - an object... ",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md",
- "items" : [
- {
- "listeners" : {
- "render" : "function (_self)\n{\n _this.httpButton = _self;\n}"
- },
- "String weight" : "primary",
- "xtype" : "Button",
- "$ xns" : "Roo.bootstrap",
- "String html" : "http://",
- "* prop" : "before",
- "items" : [
- {
- "xtype" : "Menu",
- "$ xns" : "Roo.bootstrap",
- "* prop" : "menu",
- "items" : [
- {
- "listeners" : {
- "click" : "function (e)\n{\n _this.httpButton.setText(\"http://\");\n}"
- },
- "xtype" : "MenuItem",
- "$ xns" : "Roo.bootstrap",
- "String html" : "http://"
- },
- {
- "listeners" : {
- "click" : "function (e)\n{\n _this.httpButton.setText(\"https://\");\n}"
- },
- "xtype" : "MenuItem",
- "$ xns" : "Roo.bootstrap",
- "String html" : "https://"
- }
- ]
- }
- ]
- }
- ]
- },
- {
- "xtype" : "Input",
- "string placeholder" : "after - a button",
- "$ xns" : "Roo.bootstrap",
- "string size" : "md",
- "items" : [
- {
- "String weight" : "success",
- "xtype" : "Button",
- "$ xns" : "Roo.bootstrap",
- "String html" : "Go",
- "* prop" : "after"
- }
- ]
- }
- ]
- }
- ]
- }
- ]
}
]
}
}
]
- },
- {
- cls : 'box box-danger',
- xtype : 'Container',
- xns : Roo.bootstrap,
- items : [
- {
- cls : 'box-header',
- xtype : 'Container',
- xns : Roo.bootstrap,
- items : [
- {
- cls : 'box-title',
- xtype : 'Header',
- xns : Roo.bootstrap,
- level : 3,
- html : 'Different Width'
- }
- ]
-
- },
- {
- xtype : 'Form',
- labelAlign : 'top',
- xns : Roo.bootstrap,
- items : [
- {
- cls : 'box-body',
- xtype : 'Container',
- xns : Roo.bootstrap,
- items : [
- {
- xtype : 'Row',
- xns : Roo.bootstrap,
- items : [
- {
- md : 3,
- xtype : 'Input',
- placeholder : 'md 3',
- xns : Roo.bootstrap,
- size : 'md'
- },
- {
- md : 3,
- xtype : 'Input',
- placeholder : 'md 4',
- xns : Roo.bootstrap,
- size : 'md'
- },
- {
- md : 5,
- xtype : 'Input',
- placeholder : 'md 3',
- xns : Roo.bootstrap,
- size : 'md'
- }
- ]
-
- }
- ]
-
- }
- ]
-
- }
- ]
-
- },
- {
- cls : 'box box-info',
- xtype : 'Container',
- xns : Roo.bootstrap,
- items : [
- {
- cls : 'box-header',
- xtype : 'Container',
- xns : Roo.bootstrap,
- items : [
- {
- cls : 'box-title',
- xtype : 'Header',
- xns : Roo.bootstrap,
- level : 3,
- html : 'Input Addon'
- }
- ]
-
- },
- {
- xtype : 'Form',
- labelAlign : 'top',
- xns : Roo.bootstrap,
- items : [
- {
- cls : 'box-body',
- xtype : 'Container',
- xns : Roo.bootstrap,
- items : [
- {
- xtype : 'Input',
- placeholder : 'before : @',
- xns : Roo.bootstrap,
- before : '@',
- size : 'md'
- },
- {
- xtype : 'Input',
- placeholder : 'after: .00',
- xns : Roo.bootstrap,
- size : 'md',
- after : 0
- },
- {
- xtype : 'Input',
- placeholder : 'before $, after: .00',
- xns : Roo.bootstrap,
- before : '$',
- size : 'md',
- after : 0
- },
- {
- xtype : 'Header',
- level : 4,
- xns : Roo.bootstrap,
- html : 'With Icons'
- },
- {
- xtype : 'Input',
- placeholder : 'before : <i class="fa fa-envelope"></i>',
- xns : Roo.bootstrap,
- before : '<i class=\"fa fa-envelope\"></i>',
- size : 'md'
- },
- {
- xtype : 'Input',
- placeholder : 'after : <i class="fa fa-after"></i>',
- xns : Roo.bootstrap,
- size : 'md',
- after : '<i class=\"fa fa-check\"></i>'
- },
- {
- xtype : 'Input',
- placeholder : 'after : <i class="fa fa-ambulance"></i> before : <i class="fa fa-dollar"></i>',
- xns : Roo.bootstrap,
- before : '<i class=\"fa fa-dollar\"></i>',
- size : 'md',
- after : '<i class=\"fa fa-ambulance\"></i>'
- },
- {
- xtype : 'Header',
- xns : Roo.bootstrap,
- level : 4,
- html : 'With checkbox and radio'
- },
- {
- xtype : 'Row',
- xns : Roo.bootstrap,
- items : [
- {
- md : 6,
- xtype : 'Input',
- placeholder : '?',
- xns : Roo.bootstrap,
- before : 'fixme',
- size : 'md'
- },
- {
- md : 6,
- xtype : 'Input',
- placeholder : 'md 4',
- xns : Roo.bootstrap,
- size : 'md'
- }
- ]
-
- },
- {
- xtype : 'Header',
- level : 4,
- xns : Roo.bootstrap,
- html : 'With buttons'
- },
- {
- before : {
- menu : {
- xtype : 'Menu',
- xns : Roo.bootstrap,
- items : [
- {
- xtype : 'MenuItem',
- xns : Roo.bootstrap,
- html : 'http://',
- listeners : {
- click : function (e)
- {
- _this.httpButton.setText("http://");
- }
- }
- },
- {
- xtype : 'MenuItem',
- xns : Roo.bootstrap,
- html : 'https://',
- listeners : {
- click : function (e)
- {
- _this.httpButton.setText("https://");
- }
- }
- }
- ]
-
- },
- weight : 'primary',
- xtype : 'Button',
- xns : Roo.bootstrap,
- html : 'http://',
- listeners : {
- render : function (_self)
- {
- _this.httpButton = _self;
- }
- },
- items : [
-
- ]
-
- },
- xtype : 'Input',
- placeholder : 'before : - an object... ',
- xns : Roo.bootstrap,
- size : 'md',
- items : [
-
- ]
-
- },
- {
- after : {
- weight : 'success',
- xtype : 'Button',
- xns : Roo.bootstrap,
- html : 'Go'
- },
- xtype : 'Input',
- placeholder : 'after - a button',
- xns : Roo.bootstrap,
- size : 'md',
- items : [
-
- ]
-
- }
- ]
-
- }
- ]
-
- }
- ]
-
}
]