examples/bootstrap/dashboard1.bjs.0B3ZLX

examples/bootstrap/dashboard1.bjs
examples/bootstrap/dashboard1.js.A5B1LX
examples/bootstrap/dashboard1.js
examples/bootstrap/dashboard1.bjs.7Z90LX
examples/bootstrap/dashboard1.js.8VX0LX

diff --git a/examples/bootstrap/dashboard1.bjs b/examples/bootstrap/dashboard1.bjs
index 2fdfe8b..014e0a2 100644 (file)
--- a/examples/bootstrap/dashboard1.bjs
+++ b/examples/bootstrap/dashboard1.bjs
@@ -425,6 +425,372 @@
                                                             ]
                                                         }
                                                     ]
+                                                },
+                                                {
+                                                    "Number md" : 6,
+                                                    "xtype" : "Column",
+                                                    "$ xns" : "Roo.bootstrap",
+                                                    "Number sm" : 12,
+                                                    "items" : [
+                                                        {
+                                                            "String cls" : "box box-primary",
+                                                            "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" : "Quick Example"
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    "xtype" : "Form",
+                                                                    "String labelAlign" : "top",
+                                                                    "$ xns" : "Roo.bootstrap",
+                                                                    "items" : [
+                                                                        {
+                                                                            "String cls" : "box-body",
+                                                                            "xtype" : "Container",
+                                                                            "$ xns" : "Roo.bootstrap",
+                                                                            "items" : [
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "Enter email",
+                                                                                    "String fieldLabel" : "Email Address",
+                                                                                    "$ xns" : "Roo.bootstrap"
+                                                                                },
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "Enter password",
+                                                                                    "String inputType" : "password",
+                                                                                    "String fieldLabel" : "Password",
+                                                                                    "$ xns" : "Roo.bootstrap"
+                                                                                },
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "Enter email",
+                                                                                    "String inputType" : "file",
+                                                                                    "String fieldLabel" : "File Input",
+                                                                                    "$ xns" : "Roo.bootstrap"
+                                                                                },
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "String inputType" : "checkbox",
+                                                                                    "$ xns" : "Roo.bootstrap",
+                                                                                    "String fieldLabel" : "Fixme - checkbox type"
+                                                                                },
+                                                                                {
+                                                                                    "String weight" : "primary",
+                                                                                    "xtype" : "Button",
+                                                                                    "$ xns" : "Roo.bootstrap",
+                                                                                    "String html" : "Submit"
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        },
+                                                        {
+                                                            "String cls" : "box box-success",
+                                                            "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 Height"
+                                                                        }
+                                                                    ]
+                                                                },
+                                                                {
+                                                                    "xtype" : "Form",
+                                                                    "String labelAlign" : "top",
+                                                                    "$ xns" : "Roo.bootstrap",
+                                                                    "items" : [
+                                                                        {
+                                                                            "String cls" : "box-body",
+                                                                            "xtype" : "Container",
+                                                                            "$ xns" : "Roo.bootstrap",
+                                                                            "items" : [
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "size lg",
+                                                                                    "$ xns" : "Roo.bootstrap",
+                                                                                    "string size" : "lg"
+                                                                                },
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "size md",
+                                                                                    "$ xns" : "Roo.bootstrap",
+                                                                                    "string size" : "md"
+                                                                                },
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "size sm",
+                                                                                    "$ xns" : "Roo.bootstrap",
+                                                                                    "string size" : "sm"
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        },
+                                                        {
+                                                            "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 : &lt;i class=&quot;fa fa-after&quot;&gt;&lt;/i&gt;",
+                                                                                    "$ xns" : "Roo.bootstrap",
+                                                                                    "string size" : "md",
+                                                                                    "string after" : "<i class=\"fa fa-check\"></i>"
+                                                                                },
+                                                                                {
+                                                                                    "xtype" : "Input",
+                                                                                    "string placeholder" : "after : &lt;i class=&quot;fa fa-ambulance&quot;&gt;&lt;/i&gt; before : &lt;i class=&quot;fa fa-dollar&quot;&gt;&lt;/i&gt;",
+                                                                                    "$ 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"
+                                                                                        }
+                                                                                    ]
+                                                                                }
+                                                                            ]
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
                                                 }
                                             ]
                                         }

diff --git a/examples/bootstrap/dashboard1.js b/examples/bootstrap/dashboard1.js
index 9b209b4..7a28b7f 100644 (file)
--- a/examples/bootstrap/dashboard1.js
+++ b/examples/bootstrap/dashboard1.js
@@ -464,6 +464,404 @@ dashboard1 = new Roo.XComponent({
                                                         }
                                                     ]
 
+                                                },
+                                               {
+                                                    md : 6,
+                                                    xtype : 'Column',
+                                                    xns : Roo.bootstrap,
+                                                    sm : 12,
+                                                    items : [
+                                                       {
+                                                            cls : 'box box-primary',
+                                                            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 : 'Quick Example'
+                                                                        }
+                                                                    ]
+
+                                                                },
+                                                               {
+                                                                    xtype : 'Form',
+                                                                    labelAlign : 'top',
+                                                                    xns : Roo.bootstrap,
+                                                                    items : [
+                                                                       {
+                                                                            cls : 'box-body',
+                                                                            xtype : 'Container',
+                                                                            xns : Roo.bootstrap,
+                                                                            items : [
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'Enter email',
+                                                                                    fieldLabel : 'Email Address',
+                                                                                    xns : Roo.bootstrap
+                                                                                },
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'Enter password',
+                                                                                    inputType : 'password',
+                                                                                    fieldLabel : 'Password',
+                                                                                    xns : Roo.bootstrap
+                                                                                },
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'Enter email',
+                                                                                    inputType : 'file',
+                                                                                    fieldLabel : 'File Input',
+                                                                                    xns : Roo.bootstrap
+                                                                                },
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    inputType : 'checkbox',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    fieldLabel : 'Fixme - checkbox type'
+                                                                                },
+                                                                               {
+                                                                                    weight : 'primary',
+                                                                                    xtype : 'Button',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    html : 'Submit'
+                                                                                }
+                                                                            ]
+
+                                                                        }
+                                                                    ]
+
+                                                                }
+                                                            ]
+
+                                                        },
+                                                       {
+                                                            cls : 'box box-success',
+                                                            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 Height'
+                                                                        }
+                                                                    ]
+
+                                                                },
+                                                               {
+                                                                    xtype : 'Form',
+                                                                    labelAlign : 'top',
+                                                                    xns : Roo.bootstrap,
+                                                                    items : [
+                                                                       {
+                                                                            cls : 'box-body',
+                                                                            xtype : 'Container',
+                                                                            xns : Roo.bootstrap,
+                                                                            items : [
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'size lg',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    size : 'lg'
+                                                                                },
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'size md',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    size : 'md'
+                                                                                },
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'size sm',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    size : 'sm'
+                                                                                }
+                                                                            ]
+
+                                                                        }
+                                                                    ]
+
+                                                                }
+                                                            ]
+
+                                                        },
+                                                       {
+                                                            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 : &lt;i class=&quot;fa fa-after&quot;&gt;&lt;/i&gt;',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    size : 'md',
+                                                                                    after : '<i class=\"fa fa-check\"></i>'
+                                                                                },
+                                                                               {
+                                                                                    xtype : 'Input',
+                                                                                    placeholder : 'after : &lt;i class=&quot;fa fa-ambulance&quot;&gt;&lt;/i&gt; before : &lt;i class=&quot;fa fa-dollar&quot;&gt;&lt;/i&gt;',
+                                                                                    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 : [
+
+                                                                                    ]
+
+                                                                                }
+                                                                            ]
+
+                                                                        }
+                                                                    ]
+
+                                                                }
+                                                            ]
+
+                                                        }
+                                                    ]
+
                                                 }
                                             ]