Ext Designer for Ext JS 4 用户指南：快速入门与工具详解

需积分: 9 102 浏览量更新于2024-07-24 收藏 2.97MB PDF 举报

《Ext Designer for Ext JS 4 用户指南》是一本详细介绍了如何在Ext JS 4框架下使用Ext Designer工具进行界面设计和组件配置的文档。该用户手册涵盖了从入门到高级操作的全面指导，旨在帮助开发者更有效地利用这款设计工具提高开发效率。 **目录概览** - 第一页：目录，列出了全书的主要章节和主题，便于读者快速定位所需内容。 **第一部分：入门与了解** - **第1章：Getting Started with Designer** 开篇部分介绍如何安装和启动Ext Designer，以及设计理念和基本工作流程。这部分会引导读者熟悉工具的界面布局和基本操作。 **第二部分：导航与工具栏** - **导航器**：详细讲解如何在设计环境中浏览、创建和管理不同的设计元素。 - **工具箱**：列出所有可用的设计工具和组件，以及它们各自的功能，如拖放、定制和布局组件。 **第三部分：设计区域与组件** - **Canvas**：这是设计的核心区域，展示了用户设计的界面结构，包括面板、窗口、网格、按钮等组件。 - **Component tab**：专门展示已添加到Canvas的组件，允许调整外观和属性设置。 - **Component Config Inspector**：提供对组件配置的深入查看和编辑，包括尺寸、样式、事件处理等功能。 **第四部分：数据管理** - **Data Stores Inspector**：讲解如何与后端数据源交互，配置数据模型和绑定，确保组件的数据驱动。 **第五部分：快捷键** - 提供了常用的快捷键列表，帮助用户提高工作效率，减少不必要的鼠标操作。 **总结** 《Ext Designer for Ext JS 4 用户指南》不仅为新手提供了清晰的引导，也适合有经验的开发者深入了解和优化其界面设计流程。通过学习和实践，开发者能够更轻松地创建出高质量的用户界面，并充分利用Ext JS 4的强大功能。

Chapter 1: Getting Started with Designer Page 12

the Panel container is set to vbox. Setting the ex attribute of each of the components in

the container to 1 will cause the components to take up the same amount of vertical space

when the container is resized. (Similarly, if you wanted the sub-panel to take up two-thirds

of the vertical space, you could set the ex value of the panel to 2 and the ex of the grid to

1.)

You need to do the same thing to the sub-panel that’s been added to the top-level panel.

Do this by selecting the sub-panel (currently labeled ‘My Panel, at the bottom of the top-

level panel) and setting the ex attribute to 1.

Although its not recommended, you can choose the absolute layout option, where you drag

components on the canvas to reposition them. When working with Designer, however, it’s

preferable to rely on the Ext JS layout manager to control the positioning and sizing of the

components.

Layout Options

Setting the layout on a container controls how Ext JS lays out the components within that

container. Switch between layout options by clicking a container’s yout cong button and

selecting a different layout.

Ext JS provides the following basic container layouts. Some support specic, commonly-

used presentation models such as accordions and cards, while others provide more gen-

eral-purpose models that can be used for a variety of applications. They’re listed here; see

“Chapter 2: Working With Layouts in Designer” to learn how to select and congure layouts

and see examples of them.

» Auto

» Absolute

» Accordion

» Anchor

» Border

» Card

» Column

» Fit

» Hbox

» Table

» Vbox

Conﬁguring Components

Component attributes such as titles and labels can be edited directly in the Designer Can-

vas. Just double-click the text you want to modify and type. The Component Cong inspec-

tor enables conguration of all possible attributes for the selected component. Whenever

you change the attribute from something other than the default value, Designer places an

‘x’ next to the attribute. This makes it easy to nd edited attributes and revert to the default.

Chapter 1: Getting Started with Designer Page 13

For the example application, start by setting the title and column heading attributes. Dou-

ble-click the title of the top-level panel (‘My Panel’) and type

Car Listings. This does the

same as setting the title attribute in the Component Cong inspector. You’ll see the follow-

ing:

Next, double-click the text in the three column headings in the grid (‘Column’) one at a

time. Type over each column head

Manufacturer, Model, and Price (from left to right) to

change their names.

The component attributes can all be set in the Component Cong inspector in the lower

right corner of the Designer window. Try this for the rest of the component attributes in the

example application.

First, remove the title bars from the grid panel and sub-panel within the top-level panel.

Select each component and click the clear button (x) to the right of the title attribute in the

inspector. Now, the only title bar visible is the Car Listings title, as shown in the next image.

The component needs to have its own name in the code that will be generated for the

example UI. To name the component in the code, select the top-level panel, which you just

renamed ‘Car Listings. Double-click the text next to the userClassName attribute in the

Component Cong inspector (‘MyPanel’). Type over it

CarMasterDetail.

To see the code for the project, click the Code button below the canvas. You can toggle

between the design and code views by clicking the Design and Code buttons.

Next, enable the frame attribute of the Car Listings panel. Instead of the plain 1px square

borders, this renders the panel with additional styling, including rounded corners. Do this by

scrolling further down the inspector and clicking the box next to the frame attribute. The box

should now have a check mark in it.

Now, congure ids for the components so they can be directly referenced in the code re-

gardless of how they are nested. First, select the Grid Panel and set the itemId for the panel

to ‘grid.’ Then, select the sub-panel and set its itemId to ‘detail’.

剩余73页未读，继续阅读

red_9010

粉丝: 1
资源: 11

Ext Designer for Ext JS 4 用户指南：快速入门与工具详解

spketdwcs-ext-2.1.mxp

bcprov-jdk15on-1.54.jar bcprov-ext-jdk15on-1.54.jar下载

3------通过实例学习------Ext.js------.pdf

4. Linux-RHCSA-磁盘管理-磁盘配额的设置和管理技巧

1. Linux-RHCE-NFS服务-NFS服务概述

14.Linux-RHCE-shell-AWK- 数据库交互方法

14. Linux-RHCE-NFS服务-性能调优和优化

8. Linux-RHCE-NFS服务-NFS服务器调优技巧

ext-basex.js下载

spring.cloud.nacos.config.ext-config[0].data-id用yaml的方式怎么写

最新资源