使用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
分享到:
相关推荐
SenchaSDKTools-2.0.0-Beta-windows
SenchaCmd-4.0.5.87--windows.exe.zip SenchaCmd-4.0.5.87--windows.zip
sencha-touch 移动开发sencha-touch 移动开发sencha-touch 移动开发
它提供了运行性能良好的用户界面控件,并且在界面布局管理和全键盘支持方面有更突出的优势。 等等 Ext Core Ext Core 是一个构建跨浏览器运行的动态 web 应用的 JavaScript 库,它提供了 DOM 查询和元素选择的跨...
用Sencha Architect Tool开发的第一个程序.
简单破解 Sencha Architect 2.2 (ExtJs Designer)
3.网络服务:提供了轻量级的网络服务,如,使用sencha web start 可以启动网络服务。 4.本地包装:以一流的移动应用程序访问设备给移动应用程序并且可以方便的分布到移动商店。 5.包装管理系统:方便集成的由管理...
使用SenchaTouch开发跨平台移动Web应用
SenchaCmd-4.0.5.87
SenchaSDKTools-1.2.3 SenchaSDKTools SenchaSDKTools-1.2.3-windows-installer SenchaTools Extjs4.0 SDK Tools 用来压缩打包部署Extjs4.0应用
.sencha/ # Sencha-specific files (for example, configuration) app/ # Application-specific content Boot.js # Private, low-level dynamic loader for JS and CSS Microloader.js # Loads app based on ...
sencha-touch-2.3.1-gpl.zip
1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-debug.html页面文件(使用sencha-touch-debug.js核心脚本文件)与app.js脚本文件(开发阶段使用,未经过压缩...
SenchaCmd-6.5.3.6-windows-64bit ext6.2.0gpl SenchaCmd-6.5.3.6-windows-64bit ext6.2.0gpl
SenchaCmd-6.5.3.6-windows-64bit ext6.2.0gpl SenchaCmd-6.5.3.6-windows-64bit ext6.2.0gpl
通过拖拽组件来创建富用户界面并连接到后端的数据源。 支持通过Sencha Touch 2来构建移动Web应用以及通过Ext JS 4来构建桌面Web应用。 其提供的代码编辑功能可以在Sencha Architect中创建整个应用。 支持模型——...