IT:AD:Sencha Touch:Concepts:UI:Buttons
Summary
- Button type is controlled with the
ui
attribute:ui
: normal|back|forward|action|round
Example (warning:Markdown Munging):
var buttonsPanel = new Ext.Panel({ fullscreen: true, items: [ // add a panel to the root panel // this will contain a vertical layout of buttons { xtype: "panel", layout: "vbox", items: [ { xtype: "button", ui: "normal", text: "Normal" }, { xtype: "button", ui: "back", text: "Back" }, { xtype: "button", ui: "round", text: "Round" }, { xtype: "button", ui: "action", text: "Action" }, { xtype: "button", ui: "forward", text: "Forward" } ] } ] });
List of Icons
The icons that can be used in iconCls Ref:
action add arrow_up arrow_right arrow_down arrow_left bookmarks compose delete download favorites info more refresh reply search settings star team time
Custom Images
As of 2.1.0 all of the images can be found in {SDK}/resources/themes/images/default/pictos You can use any of the default icons out of the box and if you want to use any of the other icons in the set you can add the following to the app.scss file ({SDK}/resources/sass):
@include pictos-iconmask({ICONNAME}); i.e. @include pictos-iconmask('doc_list'); If you have an icon of your own design you can add it to the pictos folder and just refer to it by name using the same @include syntax. Also, to maximize space savings when your CSS file is compiled you can use $include-default-icons: false in the app.scss file and then just include the icons your app actaully ends up needing.