it:ad:sencha_touch:concepts_ui_buttons

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"  
          }
        ]  
      }
    ]
  });

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

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.

  • /home/skysigal/public_html/data/pages/it/ad/sencha_touch/concepts_ui_buttons.txt
  • Last modified: 2023/11/04 03:30
  • by 127.0.0.1