使用Sencha Designer来快速开发web用户界面 -- 页面布局

使用Sencha Designer来快速开发web用户界面 -- 页面布局

1.what is layout?

2.basic layout?

3.如何配置容器的layout？

4.some useful demo?

1.what is layout ?

In ExtJS, layouts control the size and position of the components within an application.其中需要注意的是一个子容器的layout是默认继承自它的父容器的layout的。有时候，一些container是存在default layout，例如像FormPanel默认使用的layout就是form layout。

2.basic layout

auto: 如果一个容器没有设置layout的话，那么默认的使用auto作为layout，但是对于特定的容器的话，默认的layout可能不是auto。For example, FormPanel defaults to the form layout and TabPanel defaults to the card layout.

absolute： 使用xy坐标的形式来布局容器中的控件。当你使用absolute作为容器的布局时，Designer会显示grid，但是在最终的界面上是不显示的。

accordion： Arranges panel components in a vertical stack where only one panel is expanded at a time

anchor：Arranges components relative to the sides of the container.

card：Arranges multiple child components but only one component is visible at a time.

column： Arranges components in a multi-column layout.

fit： Expands a single child component to fill the available space.

form：Arranges a collection of labelled form fields. A FormPanel uses the form layout by default.

hbox：Arranges the child components horizontally.

table：Arranges components in an HTML table. You specify the number of columns in the table and can create complex layouts by specifying the rowspan and colspan attributes on the child components

vbox：Arranges the child components vertically. Setting the alignment of the container to stretch causes the

child components to fill the available horizontal space. Setting the flex attribute of the child components controls the proportion of the vertical space each component fills.

3.如何配置容器的layout？

4. some useful demo

这里使用Designer设计一个使用Car layout的registration wizard。

1. Drag a Window onto the Designer Canvas. A Window can only be added as a top-level component, it cannot be added as a child of an existing component.

2. Click the Window's flyout config button and select card from the layout menu.



3. Drag a Panel component onto the Window for the first step in the wizard. Panels in a CardLayout are numbered in the order they are added to the container, starting with item 0. By default, item 0 is set as the active item. To change the active item within Designer, select the Window and set the activeItem attribute to the panel you want to make active.

4. Add two more panels to the Window. You can drag them onto the title bar of the Window on the canvas, or onto the Window in the Components tab.



5. Edit the title of the Window to name the wizard. You can double-click the Window title on the Canvas to edit it, or select the Window and set the title attribute in the Component Config inspector.



6. Hide the title bars of each Panel in the Wizard by selecting the Panel in the Components tab and clicking the delete icon next to its title attribute in the Component Config inspector.



7. Add a Toolbar to the Window for the navigation buttons and dock it at the bottom of the Window (bbar).

8. Add four buttons to the Toolbar and set the buttons' text attributes to Cancel, Previous, Next, and Submit. You can double-click the button labels on the Canvas to edit them, and use tab to move to the next button in the Toolbar.

9. To align the buttons, you can add a Fill between the Cancel and Previous button, and a Spacer of width 20 between the Next and Submit buttons.

10. Set the autoRef attribute for each button so you can easily reference the buttons in your navigation handler. For example, autoRef: cancelBtn, autoRef: prevBtn, autoRef: nextBtn, and autoRef: submitBtn.

11.Now we're ready to add the content for each card in the Wizard. However, since we want to gather user input, we actually want each card to be a FormPanel rather than a Panel. Fortunately, in Designer it's easy to transform a component into another type. To change the Panels into FormPanels, right-click each one and choose Transform > FormPanel