From: Alan Knowles Date: Thu, 11 Sep 2014 10:00:00 +0000 (+0800) Subject: examples/bootstrap/dashboard1.bjs.0B3ZLX X-Git-Url: http://git.roojs.org/?a=commitdiff_plain;h=a9373be17fd73c86b6bae57e423e7e35891c3f75;p=roojs1 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 2fdfe8b208..014e0a27e0 100644 --- 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" : "", + "string size" : "md" + }, + { + "xtype" : "Input", + "string placeholder" : "after : <i class="fa fa-after"></i>", + "$ xns" : "Roo.bootstrap", + "string size" : "md", + "string after" : "" + }, + { + "xtype" : "Input", + "string placeholder" : "after : <i class="fa fa-ambulance"></i> before : <i class="fa fa-dollar"></i>", + "$ xns" : "Roo.bootstrap", + "string before" : "", + "string size" : "md", + "string after" : "" + }, + { + "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 9b209b47d5..7a28b7fa2a 100644 --- 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 : '', + size : 'md' + }, + { + xtype : 'Input', + placeholder : 'after : <i class="fa fa-after"></i>', + xns : Roo.bootstrap, + size : 'md', + after : '' + }, + { + xtype : 'Input', + placeholder : 'after : <i class="fa fa-ambulance"></i> before : <i class="fa fa-dollar"></i>', + xns : Roo.bootstrap, + before : '', + size : 'md', + after : '' + }, + { + 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 : [ + + ] + + } + ] + + } + ] + + } + ] + + } + ] + } ]