Sencha Inc. | HTML5 Apps

Working with Components in Ext Designer

Published Jul 08, 2011 | The Sencha Dev Team | Tutorial | Easy
Last Updated Aug 02, 2011

This Tutorial is most relevant to , 1.x.

What's in the Toolbox?

Designer supports all of the standard Ext JS UI components. In a future release, you will also be able to add custom components to the Toolbox.

This section provides an overview of the standard Toolbox components. For additional information about individual components, see the Ext JS API Documentation.

Containers

To build your UI, you start with a container and add display and control components to it. Ext JS provides a variety of common UI containers, such as Window, Panel, and Viewport.

You control how components are arranged within a container by configuring the container's layout options. To see how the various layout options work, check out the Ext JS Layout Browser. You'll also find an introduction to layouts in Getting Started with Designer.

Tip: When you're nesting containers, make sure you aren't adding redundant containers to the hierarchy. For example, if you want to display a TreePanel and a GridPanel in a Viewport that uses BorderLayout, you can add them directly to the Viewport and set their region attributes to control their positions. There's no need to add left and center Panel components to the ViewPort first, and then add the TreePanel and GridPanel to those Panels.

To begin constructing your UI with Designer, you drag a container to the canvas and add components to the container. Designer will prevent you from adding invalid components to a container. For example, Viewports and Windows can only be used as top-level components and cannot be nested within other containers.

Dragging a container to an empty portion of the canvas creates a new top-level component. When you export your project, a separate class file is automatically generated for each top-level component. You can also export a nested component as a separate class by using the Promote to Class option. This enables you to generate and maintain several smaller implementation files for a complex interface, rather than have all of your code in a single, monolithic file. It also makes it easier to reuse your custom components.

Container

Container is the simplest component that can contain other components. All other container types are extensions of the Container class.

A Container is simply a logical container. Unlike a Panel or Window, it doesn't have any default visual characteristics.

While you will most often use the more specialized containers, Container provides a lightweight option for cases in which you don't need (or want) the added functionality. For example, you can use Containers to create a multi-column layout within a form.

The default layout for a Container is ContainerLayout, which simply renders nested components as-is. If you use the default layout for a Container, nested components will not be resized when the Container is resized.

FieldSet

FieldSet is used to group related fields within a FormPanel. If you specify the title attribute for a FieldSet, it is displayed as a header within the FieldSet's frame.

Typically, you place Form Fields in a FieldSet, but a FieldSet can also contain nested containers. For example, you might want to use nested Container components within a FieldSet to create a multi-column layout. Note that the nested Container that you add the fields to must also use FormLayout.

FormPanel

FormPanel is a specialized container that uses FormLayout to render a collection of fields and labels. In addition to the various Form Fields, you can add containers such as Container and FieldSet to a FormPanel. For example, you might use nested Containers to build a multi-column form. Any nested containers that you add fields to must also use FormLayout.

Internally, a FormPanel uses a BasicForm to handle file uploads, data validation, and submission.

Panel

Panel is the basic building block for application-oriented user interfaces. A Panel can be added to any type of container and can contain separate header, footer, and body sections.

While you can add Panels directly to your UI, there are a number of specialized types of panels available, including FormPanel, TabPanel, GridPanel, and TreePanel. The Window and FieldSet containers are also extensions of Panel.

By default, a Panel uses ContainerLayout, which simply renders nested components in the order they are specified in the Panel class.

To control the position and sizing of the nested components, you need to choose an appropriate layout.

TabPanel

TabPanel is a specialized type of Panel that uses CardLayout to display a collection of nested components as separate tabs.

A TabPanel's title attribute is not displayed

Note
: TabPanel uses the header and footer space for the tab selector buttons. If you need to display a header, wrap the TabPanel in a Panel container that uses FitLayout.

In Designer, when you add a TabPanel to the canvas, it contains three tab components by default. You can add whatever subcomponents you want to each tab, as well as add or remove tabs by dragging components onto the TabPanel.

Viewport

Viewport is used to represent the entire viewable application area in a browser window. A Viewport automatically sizes itself to the size of the browser viewport.

You can only have one Viewport per page, but it can contain nested panels that each have their own layouts and nested components. A Viewport is not scrollable—if scrolling is required, use scrollable child components within the Viewport.

Typically, you assign the BorderLayout to the ViewPort and position Panels by setting their region attributes to North, South, East, West, or Center. If no region is specified for a component, it defaults to the Center region.

Window

Window is a specialized type of Panel that is resizable and draggable. Windows can also be maximized to fill the viewport, minimized, and restored to their previous size. Unlike an ordinary Panel, Windows float and can be closed.

Windows are commonly used to present dialogs and errors.

Form Fields

To build a form, you add Form Field components to a FormPanel. You can group related fields with a FieldSet. To create multi-column forms, you can add nested Containers for the columns. For more information about designing forms, see Building Forms.

Checkbox

Checkbox represents a single checkbox field. You set the boxLabel attribute to specify the label for a Checkbox.

You can add multiple checkbox components to a Container to create a checkbox group.

Note: Due to problems with RadioGroup and CheckboxGroup In Ext JS 3.x, these components are not included in the Designer Toolbox. See Adding a Group of Radio Buttons or Checkboxes for more information about how to use containers to build radio and checkbox groups with Designer.

ComboBox

ComboBox enables users to select from a list of items.

To configure the items for a ComboBox, you connect it to a Data Store. For more information, see Populating a ComboBox.

The height of a ComboBox is always set automatically. You can only change the width of a ComboBox if it is:

  1. Not used in an anchor, form, or fit layout
  2. Not within an EditorGrid Column

CompositeField

CompositeField enables you to easily display multiple fields on the same row of your form.

A common use of CompositeField is for multi-part name fields. However, a CompositeField can contain any type of Form Field, not just TextFields.

If no fieldLabel is specified on a CompositeField, the label defaults to a list of its children's fieldLabel attributes. (Like all fields, a CompositeField's label is automatically rendered when it's placed in a FormPanel container.)

In Designer, when you drag a CompositeField to the canvas, it contains one TextField component by default. You can add fields by dragging them into the CompositeField or duplicating existing fields.

DateField

DateField provides a date-picker for Ext JS applications. It also provides automatic data validation for dates that the user enters manually.

DisplayField

DisplayField renders view-only text that is not validated or submitted with a form. In your application code, you call setValue on the DisplayField to set the display text.

Hidden

Hidden is a field that is not displayed within a form, but can be used to pass data when the form is submitted. In Designer, when you drag a Hidden field onto the canvas, there is no visual representation of the field, but it is listed on the Components tab.

HtmlEditor

HtmlEditor is a lightweight WYSIWYG HTML editor you can use within forms to enable users to submit styled text. Tooltips are defined for the editor toolbar, but to enable them you need to initialize QuickTips.

NumberField

NumberField is a specialized text field that automatically performs numeric data validation and only allows the user to enter numeric values.

You can set attributes on the field to control whether or not decimal or negative values are permitted and set a maximum value. If decimal values are permitted, you can also set the precision and separator character.

Radio

Radio represents a single radio button. You set the boxLabel attribute to specify the button label. You can add multiple Radio components to a Container to create a radio button group.

To restrict the user to selecting a single radio button within a group, you set the same name attribute for each button.

Note: Due to problems with RadioGroup and CheckboxGroup In Ext JS 3.x, these components are not included in the Designer Toolbox. See Adding a Group of Radio Buttons or Checkboxes for more information about how to use containers to build radio and checkbox groups with Designer.

SliderField

SliderField enables you to use a slider control for a form field. This provides an alternative to using NumberField for numeric data.

In Designer, when you add a SliderField, useTips is enabled to show the selected value, minValue is 0, maxValue is 100, and the increment is 1.

TextArea

TextArea is a specialized TextField that supports multi-line text entry for gathering larger amounts of user input.

If you want to allow users to enter styled text, use the HtmlEditor component instead.

TextField

TextField is a basic text entry field.

In addition to providing a commonly-used form element itself, TextField is used as a building block for a number of specialized field types, including NumberField, TextArea, TriggerField, and ComboBox. TextField provides built-in support for data validation. For information about customizing validation behavior, see the ExtJS API Documentation.

TimeField

TimeField is a specialized ComboBox for selecting a time. You can configure the time range by setting the minValue and maxValue. By default, the list displays times in 15 minute intervals. You can configure the interval by setting the increment attribute.

TimeField supports time and date formats specified in the parsing and formatting syntax defined in Date.js. If the input doesn't match the expected format, TimeField and automatically tries to parse it using alternate formats.

By default, the format is set to g:iA, which displays times using a 12 hour clock. For example, 3:15PM. To use a 24 hour clock, you would set the format attribute to H:i.

TriggerField

TriggerField wraps a TextField to add a clickable trigger button, like that used for a ComboBox.

By default a TriggerField looks like a ComboBox, but the trigger does not have a default action. You can provide a custom action by overriding onTriggerclick, or extend TriggerField to implement a custom reusable component. ComboBox extends TriggerField to provide standard combo box behavior. TimeField is also a specialized TriggerField.

Grid

To display data from a Store in an interactive table component, you can use a GridPanel. GridPanel has built-in support for resizing and sorting columns, as well as dragging and dropping columns. It also supports horizontal scrolling and single and multiple selections. EditorGridPanel adds support for inline editing.

For applications where you don't need all of the column-management features provided by GridPanel but do need full control over how the data is formatted and laid out, you might want to use a ListView instead of a grid.

BooleanColumn

A BooleanColumn is a specialized Column for displaying Boolean data in a Grid.

CellSelectionModel

CellSelectionModel is a specialized SelectionModel that can be use to select individual cells within a GridPanel instead of selecting entire rows.

CheckboxSelectionModel

CheckboxSelectionModel is a specialized RowSelectionModel that adds a column of checkboxes to a GridPanel that can be used to select or deselect rows. This is commonly used to enable actions such as move or delete on a selected group of items.

Column

A Column controls how the data in a GridPanel column will be rendered. Column can be used directly to display textual data, and Ext JS provides specialized Column types for displaying Boolean data, numeric data, dates, and templated data.

DateColumn

A DateColumn is a specialized Column for displaying dates in a Grid. You specify the Format attribute to control how the date is formatted. DateColumn supports the date formats specified in the parsing and formatting syntax defined in Date.js.

EditorGridPanel

An EditorGridPanel is a specialized GridPanel that enables cells to be edited. For a Column in a GridPanel to be editable, it needs to be configured with an appropriate editor, which is simply the form field that will be used to edit the data.

GridPanel

A GridPanel displays tabular data in rows and columns. The data displayed by a GridPanel is read from a Store. A GridPanel's ColumnModel controls how the data is rendered into the columns of the grid, and Column components encapsulate the configuration information needed to render individual columns.

GridView

A GridView encapsulates the user interface for a GridPanel. You can add a GridView to a GridPanel so you can access the grid's user interface elements to enable special display effects.

GroupingView

A GroupingView is a specialized GridView that adds the ability to group related rows in the grid and expand and collapse the groups. For example, if you have a grid that displays customer names and addresses, you might want to group them by city or state.

To enable grouping, the GridPanel must be configured to use a GroupingStore, which is a specialized store that specifies the grouping field and direction in addition to your data.

NumberColumn

A NumberColumn is a specialized Column for displaying numeric values in a Grid. You specify the Format attribute to control how the number is formatted. The formatting string is defined according to Ext.util.Format.number.

RowSelectionModel

RowSelectionModel is the default SelectionModel used for a GridPanel. It supports multiple selections and keyboard selection and navigation. You can disable multiple selections by enabling the singleSelect attribute. Disable the moveEditorOnEnter attribute to prevent Enter and Shift+Enter from moving the Editor between rows. See also CellSelectionModel and CheckboxSelectionModel.

TemplateColumn

A TemplateColumn is a specialized Column that processes a record's data using the specified template to generate the value to display in the Grid. The template is set in the tpl attribute.

Menu

To build a menu in ExtDesigner, you add a Menu component to a Button. To build a menu bar, you add a Button for each of your menus to a Toolbar, and then configure a Menu component for each button. For more information about building menus, see Building Menus.

CheckItem

A CheckItem is a specialized MenuItem that includes a checkbox or radio button for toggling a MenuItem on and off. If the group attribute is set, all items with the same group name are treated as a single-select radio button group.

Menu

A Menu is a container for a collection of menu items.

To create a menu, you add a Menu to a Button component, and then add CheckItem, MenuItem, Separator, and TextItem components to the Menu.

Note: Although you typically use standard menu item components in a Menu, a Menu can contain any type of Component.

Menu Item

A menu Item is a standard selectable Menu option.

Separator

A Separator is a divider that can be added to a Menu. A Separator is typically used to separate logical groups of menu items.

TextItem

A TextItem is a non-selectable text string that can be added to a Menu. A TextItem is typically used as a header for a group of menu items.

Standard

These components provide the basic building blocks for your UI.

BoxComponent

BoxComponent is the basis for all components that need to be sized using a width and height and managed within a layout. It's not usually used directly—typically, you'll use a Container or one of the other specialized BoxComponents such as a Button or a Field.

Button

A Button can be an icon, text, or both. You can set a Button's icon attribute to specify an image to use for the button. To display an icon and text, you also need to set the iconCls attribute to specify the CSS class for the label to x-btn-text-icon.

You also use Buttons to build menus—a menu is just a Button component that has a nested Menu component. To create a menu bar, you add a Button for each of your menus to a Toolbar, and then configure a Menu component for each button.

In Designer, you can configure a menu by clicking a Button's flyout configuration button, or manually drag a Menu component onto the button.

CycleButton

A CycleButton is a specialized SplitButton that contains group of CheckItems. A CycleButton automatically cycles through the items on click—when you click an item, the Button text is replaced with the text of the clicked item.

Label

A Label contains the text that identifies a Component in a form. You do not normally use Label directly. Labels are automatically created for Components and can be set through the fieldLabel attribute. (For Checkbox fields, you set boxLabel to specify the label text that is displayed beside the checkbox.) A Component's label is only displayed when it is rendered by a container that uses FormLayout.

MultiSlider

A MultiSlider is a slider control that supports multiple thumbs. You can add a MultiSlider to any Container and it can be placed either horizontally or vertically. To create a slider with multiple thumbs, you specify an array for the values attribute, rather than specifying a single value. To use a slider within a Form, you typically use a SliderField.

ProgressBar

A ProgressBar displays the progress of a task. ProgressBar supports two modes: manual and automatic. Manual mode enables you to explicitly update the progress of a task. When you need to show progress throughout an operation that has predictable milestones, you should use manual mode. Automatic mode enables you to display the progress bar for a fixed amount of time, or simply run until it's cleared. When you want to display progress for a timed or asynchronous task, you can use automatic mode.

Spacer

A Spacer is a BoxComponent that provides way to add a specific amount of whitespace to a layout.

SplitButton

A SplitButton is a specialized Button that has a built-in dropdown arrow that can fire an event separately from the button's click event. CycleButton extends SplitButton to enable you to cycle through a set of menu items. ComboBox uses a SplitButton to implement standard combo-box behavior.

Toolbar

To create a toolbar that displays a collection of buttons, menus, or other controls, you add a Toolbar component and then add the control components to the Toolbar. Toolbars are typically added to a Panel container, and can be docked at the top (tbar), bottom (bbar), or footer (fbar).

ButtonGroup

A ButtonGroup is a specialized Panel container for a collection of buttons. Conceptually, a ButtonGroup is similar to a menu in that it contains a collection of related items the user can choose from.

You can add any type of button to a ButtonGroup—Button, CycleButton, or SplitButton. However, unlike a Menu, you cannot add other control components.

Fill


A Fill is a specialized Spacer that can be added to a Toolbar when you want some components to be left-aligned, and the remainder to be right-aligned. When you insert a Fill between Toolbar components, all components following the Fill will be right-aligned. For example, if you add a Cancel Button and a Submit button to a Toolbar that has buttonAlign set to left, you can insert a Fill component between them to left-align the Cancel Button and right-align the Submit Button:

PagingToolbar

A PagingToolbar is a specialized Toolbar that provides controls for paging through large data sets.

PagingToolbar provides automatic paging control by loading blocks of data from a source into a data Store. You set the pageSize attribute to specify how many items you want to display at a time. PagingToolbar is designed to be used with a GridPanel.

Separator

A Separator is a Toolbar Item that enables you to insert a divider between components in a Toolbar. A Separator is typically used to separate logical groups of buttons in the Toolbar. You can also use a ButtonGroup to group buttons.

Spacer

A Spacer is a Toolbar Item that enables you to insert an arbitrary amount of space between components in a Toolbar. To control the amount of space, you set the Spacer's width attribute. If you want to left-align some Toolbar components and right-align the rest, use Fill instead of adding a Spacer.

Text

Text is a Toolbar Item that enables you to add a non-selectable text string to a Toolbar as a label or heading.

Toolbar

Toolbar is a container for control components such as buttons and menus.

A Toolbar can be docked at the top (tbar), bottom (bbar), or footer (fbar) of a Panel.

Typical uses for a Toolbar are to display a menu bar at the top of a Panel, or to display buttons at the bottom of a dialog Window or FormPanel.

Tree

To display hierarchical data in a collapsible list, you use a TreePanel container. A TreePanel contains a root node and any number of child nodes. You can build a static tree, or use a TreeLoader to load data into the tree asynchronously.

AsyncTreeNode

AsyncTreeNode is a specialized TreeNode that supports asynchronous loading using a TreeLoader. When a node is expanded, data is loaded from the URL specified in the TreeLoader.

MultiSelectionModel

MultiSelectionModel enables multiple selections within a TreePanel. (By default, the selection model for a TreePanel only supports single selections.)

TreeLoader

A TreeLoader enables child nodes to be loaded when the parent is expanded. The child nodes are retrieved from a URL that returns an array of node definition objects.

TreeNode

A TreeNode is an item in a TreePanel component. For a container node, enable the expandable attribute. For a leaf node, enable the leaf attribute.

TreePanel

A TreePanel is a specialized Panel component for displaying hierarchical data in a collapsible list. At a minimum, a TreePanel has a TreeNode that's designated as the root. Additional TreeNodes can be added to the root node.

TreePanel can use a TreeLoader to dynamically load node data. When a node is expanded, TreeLoader automatically retrieves an array of node definitions from the specified URL.

Views

To display dynamic data from a Store, you can use a DataView or ListView. When you use a view, you have complete control over the formatting and layout of the data through an XTemplate.

DataView

A DataView displays data from a Store using an XTemplate to format and lay out the data. When data in the attached store changes, the DataView automatically updates. DataView provides built-in support for common actions such as click and mouseover and supports both single and multiple selections.

Because a DataView is a BoxComponent, it can be managed by it's parent's layout. Note that a DataView isn't a Panel component, however. You can't attach a Toolbar directly to a DataView, you would need to wrap it in a Panel and dock the Toolbar on the Panel.

ListView

A ListView is a specialized DataView that displays data in a tabular format, much like a GridPanel.

ListView gives you full control over the formatting and layout of the list through an XTemplate and provides built-in support for resizing columns and selecting data. However, it does not implement horizontal scrolling and provides no support for drag and drop or inline editing.

ListView BooleanColumn

A BooleanColumn is a specialized List Column for displaying Boolean data in a ListView.

ListView Column

A Column controls how the data in a ListView column will be rendered. Column can be used directly to display textual data, and Ext JS provides specialized Column types for displaying Boolean data, numeric data, and dates.

ListView DateColumn

A DateColumn is a specialized Column for displaying dates in a Grid. You specify the Format attribute to control how the date is formatted. DateColumn supports the date formats specified in the parsing and formatting syntax defined in Date.js.

ListView NumberColumn

A NumberColumn is a specialized Column for displaying numeric values in a ListView. You specify the Format attribute to control how the number is formatted. The formatting string is defined according to Ext.util.Format.number.

Building Forms

Designer simplifies laying out complex forms by enabling you to see the effects of your changes instantly. This section shows you how to:

  • Build a simple form in Designer and attach an event handler for form submission
  • Add radio button and checkbox groups
  • Arrange multiple fields in a row and create multi-column forms
  • Populate a ComboBox using a local store

Building a Simple Form

To create a form, you start with a FormPanel container. A FormPanel automatically displays the labels of any Form Fields you add to it. A form's submit and cancel buttons are added to a Toolbar that is typically docked in the footer of the FormPanel. Once you've laid out your form in Designer, you export your project and edit the generated code to attach event handlers for the submit and cancel buttons.

For example, in Designer:

  1. Double-click FormPanel in the Toolbox to add a new top-level container to the canvas. You can edit the form title by double clicking the default title. You can resize the panel by dragging its frame.


  2. Add the fields you want to the FormPanel. For example, double-click TextField to add text entry field. You can edit a field label by double-clicking the existing label.


  3. Drag a Toolbar into the FormPanel for the form's submit and cancel buttons.
  4. Click the flout configuration button on the Toolbar and select fbar to dock the toolbar in the FormPanel footer. This will display the buttons below the form.


  5. Drag buttons into the Toolbar for the Submit and Cancel buttons. You can edit a button's label by double-clicking it.


  6. Set the autoRef attribute for each button. For example, autoRef: submitBtn and autoRef: cancelBtn. This enables you to easily reference the buttons to attach event handlers when you export your project.


  7. Save and export your project.
  8. Edit the generated .js file for your form, for example MyForm.js. After the initComponent call, specify the functions that you want to invoke when the Submit and Cancel buttons are clicked. For example:
    MyForm = Ext.extend(MyFormUi, {
    	initComponent: function() {
    		MyForm.superclass.initComponent.call(this);
    		this.submitBtn.on('click', this.onSubmitBtnClick, this);
    		this.cancelBtn.on('click', this.onCancelBtnClick, this);
    	},
    });
    
  9. Add the implementations for your submit and cancel handler functions to your form class. For example:
    MyForm = Ext.extend(MyFormUi, {
    	initComponent: function() {
    		MyForm.superclass.initComponent.call(this);
    		this.submitBtn.on('click', this.onSubmitBtnClick, this);
    		this.cancelBtn.on('click', this.onCancelBtnClick, this);		
    	},
    	onSubmitBtnClick: function() {
    		// your implementation here!	
    	}
    	onCancelBtnClick: function() {
    		// your implementation here!
    	}
    });
    

Changing the Width of Form Components

Form fields placed in FormPanel are automatically configured with an anchor of 100%. To change the width of a field:

  1. Clear the anchor attribute.
  2. Set the width attribute to the width you want (in pixels).

Adding a password field

To create a password field:

  1. Add a text field to the form.
  2. Set the field's inputType attribute to password in the Component Config inspector.

Adding a Group of Radio Buttons or Checkboxes

In Designer, you can create a group of radio buttons or checkboxes by adding them to a FieldSet component. To restrict the user to selecting only one of the buttons in a radio button group, you set the same name attribute on each of the buttons.

For example, to add radio buttons for a Yes/No selection to your form:

  1. Drag a FieldSet container into your FormPanel.


  2. Drag two Radio fields into the FieldSet.


  3. Since the buttons are contained within a FieldSet, the fieldLabels aren't necessary. To hide them, select the FieldSet and enable hideLabels.


  4. Double click each Radio's boxLabel to set the text for the Yes and No options.
  5. Set the name attribute of each Radio to the same name, for example newsletter. This will prevent both buttons from being selected at the same time. To specify one of the buttons as the default, enable its checked attribute.


  6. Arranging Fields in Multiple Columns

    If you have a form with a large number of fields, you might want to arrange them in more than one column to minimize scrolling. To do this, you can use nested Containers within your FormPanel. You can lay out your entire form in multiple columns, or only use multiple columns for a particular section.

    For example, if you have several related checkboxes, you might want to arrange them in multiple columns to conserve space:

    1. Add a FieldSet to your FormPanel for the checkboxes.
    2. Set the layout of the FieldSet to hbox.


    3. Add a Container component to the FieldSet for each column and configure the following settings for both. It's easiest to select the column containers from the Component list, rather than from the canvas.
      1. Set layout to vbox.
      2. Set flex to 1.
      3. Set the height to accommodate the checkboxes you want to add. For example, 60 pixels will accommodate three rows of checkboxes.
    4. Add checkboxes to each column container and set their boxLabel attributes.


    Aligning Fields Horizontally

    If you just want to align a group of related fields on one line, instead of creating multiple columns, you can use CompositeField.

    For example, to create a multi-part name field:

    1. Add a CompositeField to your FormPanel. By default, a CompositeField contains a single TextField.


    2. Add a second TextField to the CompositeField. You can drag it onto the Canvas and drop it on the CompositeField, or drag it into the CompositeField in the Components list.


    3. If you set the fieldLabel attribute on each contained field and remove the fieldLabel from the CompositeField itself, the CompositeField label will be a list of the labels for the contained fields.

    Populating a ComboBox

    The items listed in a ComboBox are defined in a data Store. The easiest way to set up a Store for a ComboBox is to create a local Array Store:

    1. Choose Add ArrayStore from the Data Stores tab.
    2. Right-click the new Store and choose Quick Add > 1 field.


    3. Give the field a name. For example, comboList.
    4. Specify the list of items you want to show in the ComboBox as an array of arrays in the Store's data attribute. For example, [['Search Engine'], ['Online Ad'], ['Facebook']]


    To use the local array Store to populate a ComboBox:

    1. Select the Store from the flyout configuration button on the ComboBox.


    2. Configure the ComboBox to specify which field(s) in the Store to use to use as the displayField and valueField.


    3. Set the triggerAction attribute to all to display all of the available items in the Store in the drop-down list. Set the ComboBox mode attribute to local.


    Tip: To control the width of a fieldLabel, you can set a width in the labelStyle attribute.

    Building Menus

    You can turn any Button into a menu by adding a Menu component to it and then adding the menu items to the Menu component. Once you've configured the menu in Designer, you export your project and edit the generated code to attach event handlers for each menu item.

    Building a Menu Bar

    To create a typical menu bar, you start with a Toolbar, add a Button for each menu, and then configure a Menu component for each button.

    For example, in Designer:

    1. Drag a Toolbar onto the canvas.

    2. Drag a button onto the Toolbar for each menu. For now, add two buttons.


    3. Edit the button labels to set the name of each menu. For example, MyApp and Tools.

    4. Add a Menu component and two menu items to each button:
      1. Click the button's flyout config button and select Add to add a Menu component. This also automatically adds a Menu Item to the Menu.


      2. Click Add again to add a second item to the menu.

      You can also drag and drop a Menu onto a button to add a menu component. Similarly, you can add items to a Menu by dragging in Menu Item, CheckItem, Separator, and TextItem components.
    5. Set the text attribute of each menu item to the name you want to display in the menu. For example, set the items in the MyApp menu to About and Preferences, and the items in the Tools menu to Import and Export.
    6. Set the autoRef attribute of each menu item. For example, set the autoRef for the Export menu item to exportItm. This enables you to easily reference the items to attach event handlers when you export your project.


    7. When you're done setting up your menu bar, save and export your project.
    8. Edit the generated .js file for your menu bar, for example MyToolbar.js. After the initComponent call, specify the functions that you want to invoke when the menu items are clicked. For example:
      MyToolbar1Ui = Ext.extend(Ext.Toolbar, {
      	width: 400,
      	initComponent: function() {
      		this.items = [
      			{	
      				xtype: 'button',
      				text: 'MyApp',
      				menu: {
      					xtype: 'menu',
      					items: [
      						{
      							xtype: 'menuitem',
      							text: 'About'
      						},
      						{
      							xtype: 'menuitem',
      							text: 'Preferences'
      						}
      					]
      				}
      			},
      			{
      				xtype: 'button',
      				text: 'Tools',
      				menu: {
      					xtype: 'menu',
      					items: [
      						{
      							xtype: 'menuitem',
      							text: 'Import'
      						},
      						{
      							xtype: 'menuitem',
      							text: 'Export',
      							ref: '../../exportItm'
      						}
      					]
      				}
      			}
      		];
      		MyToolbar1Ui.superclass.initComponent.call(this);
      		this.aboutItm.on('click', this.onAboutItmClick, this);
      		this.prefItm.on('click', this.onPrefItmClick, this);
      		this.importItm.on('click', this.onImportItmClick, this);
      		this.exportItm.on('click', this.onExportItmClick, this);	
      	}
      });
      
    9. Add the implementations for your handler functions to your toolbar class . For example:
      MyToolbar1Ui = Ext.extend(Ext.Toolbar, {
      	width: 400,
      	initComponent: function() {
      		.
      		.
      		.
      		MyToolbar1Ui.superclass.initComponent.call(this);
      		this.aboutItm.on('click', this.onAboutItmClick, this);
      		this.prefItm.on('click', this.onPrefItmClick, this);
      		this.importItm.on('click', this.onImportItmClick, this);	
      		this.exportItm.on('click', this.onExportItmClick, this);
      	}
      	onAboutItmClick: function() {
      		// your implementation here!
      	}
      	onPrefItmClick: function() {
      		// your implementation here!
      	}
      	onImportItmClick: function() {
      		// your implementation here!	
      	}
      	onImportItmClick: function() {
      		// your implementation here!
      }});
      

    Creating Submenus

    Creating submenus in Designer is simple—you add a Menu component to an existing menu item and then add the submenu items. Attaching an event handler to a submenu item is just like attaching a handler to any other menu item.

    For example, to add a submenu to the Export menu item in the Menu Bar example:

    1. Drag a Menu component onto the Export menu item. You can either do this on the canvas, or in the Components tab.


    2. Add a Menu Item for each submenu item you want to make available. For this example add one for PDF and one for HTML.
    3. Set the text and autoRef attribute for each submenu item. For example, text: HTML and autoRef: exportHTMLItm.


    Populating Trees

    When you add a TreePanel to the Canvas, Ext Designer automatically adds a root node and a TreeLoader. To use the TreeLoader to populate the tree:

    1. Set the url attribute of the TreeLoader to point to the location from which you want to retrieve the node definitions.

      Note: This location is specified relative to the URL Prefix configured in the Project Settings. To view or change the URL prefix, choose Edit Preferences from the Designer Edit Menu.


    2. Define the nodes. When a node is expanded, a server request is sent and the child nodes are loaded from the URL specified in the TreeLoader. The response must be a JavaScript Array definition whose elements are node definition objects. For example:


    Share this post:
    Leave a reply

    Written by The Sencha Dev Team

2 Comments

Jim

3 years ago

images are broken in this tutorial… :(

James Pearce Sencha Employee

3 years ago

@Jim, The formatting still needs a little attention as a result, but the images are now present in this tutorial.

Leave a comment:

Commenting is not available in this channel entry.