GuangchaoSun's Blog

Ext JS学习笔记

发表于  |    |   分类于   |  

The Class System

There is also a dedicated config property that gets processed by the powerful Ext.Class pre-processors before the class is created.

Layouts and Containers

layout系统是Ext JS中最为重要的部分之一。它控制着应用中每个组件的形状和位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.create('Ext.panel.Panel',{
	renderTo: Ext.getBody(),
	width: 200,
	height: 400,
	title: 'Container Panel',
	items: [{
		xtype: 'panel',
		title: 'Child Panel 1',
		height: 100,
		width: '50%'
	}, {
		xtype: 'panel',
		title: 'Child Panel 2',
		height: '100',
		width: '75%'
	}]
});

We just created a Panel that renders itself to the document body, and we used the items config to add two child Panels to our Container Panel.

Layouts

在容器中使用Column Layout可以让组件并排显示。
上面的例子中没有使用layout这个属性，会默认使用Auto Layout，下面使用 Column Layout 属性来看一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            columnWidth: 1/3
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 1/3
        },
        {
            xtype: 'panel',
            title: 'Child Panel 3',
            height: 100,
            columnWidth: 1/3
        }
    ]
});

How the layout system works?

A Container’s Layout is responsible for the initial positioning and sizing of all of the Container’s children. Internally the framework calls the Container’s updateLayout method which triggers the Layout to calculate the correct sizes and positions for all of the Container’s children and update the DOM. The updateLayout method is fully recursive, so any of the Container’s children will have their updateLayout method called as well. This continues until the bottom of the Component hierarchy is reached.

有的时候，我们不想框架自动布局，这样我们可以将多个操作组合在一起，然后再完成时手动触发布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var containerPanel = Ext.create('Ext.panel.Panel',{
	renderTo: Ext.getBody(),
	width: 400,
	height: 200,
	title: 'Container Panel',
	layout: 'column',
	suspendLayout: true
});
containerPanel.add({
  xtype: 'panel',
  title: 'Child Panel 1',
  height: 100,
  columnWidth: 0.5
});
containerPanel.add({
  xtype: 'panel',
  title: 'Child Panel 2',
  height: 100,
  columnWidth: 0.5
});
//Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
//trigger a layout.
containerPanel.updateLayout();

Components

容器是一种特殊类型的组件，组件的层级结构类似于典型的树形结构。容器主要管理子组件的生命周期，包括：创建，着色，改变大小，位置和结束。

XTypes and Lazy Instantiation

XTypes是Ext 2.0中新的概念，被认为是Ext组件的特定类型。可用的xtype摘要可在 Component类API开始的地方找到。与一般JavaScript对象用法相似，XTypes可用于查找或比较组件对象，如isXType和getXType的方法。你亦可以列出任意组件的xtpye层次表，用方法getXTypes。

然而，如何把Xtypes用于优化组件的创建和渲染过程才是XTypes发挥威力的地方。通过指定一个xtype的配置对象的写法，可隐式声明的方式创建组件，使得如果没有渲染的需要就只是一个对象而免去实例化的步骤，这时不仅渲染的动作是延时的，而且创建实际对象的这一步也是延时的，从而节省了内存和资源。在复杂的布局中，这种性能上的改进尤为明显。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    height: 100,
    width: 200,
    items: [
        {
            // Explicitly define the xtype of this Component configuration.
            // This tells the Container (the tab panel in this case)
            // to instantiate a Ext.panel.Panel when it deems necessary
            xtype: 'panel',
            title: 'Tab One',
            html: 'The first tab',
            listeners: {
                render: function() {
                    Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
                }
            }
        },
        {
            // xtype for all Component configurations in a Container
            title: 'Tab Two',
            html: 'The second tab',
            listeners: {
                render: function() {
                    Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
                }
            }
        }
    ]
});

Creating Custom Components

子类：

1
2
3
4
5
6
Ext.define('My.custom.Component',{
	extend: 'Ext.Component',
	newMethod : function(){
		//...
	}
});

render and onRender:
render is a method defined in Component. It is responsible for initiating the rendering phase of the Component lifecycle. render must not be overridden, but it calls onRender during processing to allow the subclass implementor to add an onRender method to perform class-specific processing. Every onRender method must call its superclass’ onRender method before “contributing” its extra logic.

1
2
3
4
5
6
7
Ext.define('My.custom.Component',{
	extend: 'Ext.Component',
	onRender: function(){
		this.callParent(arguments);// call the superclass onRender method
		// perform additional rendering tasks here.
	}
});

Data Package

  • Ext.data.Model
  • Store
  • Ext.data.proxy.Proxy

Let’s look at a few of the principal part of Model:

  • Fields
  • Proxies
  • Validations
  • Associations

项目中常用到的关于Ext的方法

Ext.Msg.alert

Utility class for generating different styles of message boxes. The singleton instance, Ext.MessageBox alias Ext.Msg can also be used.

Note that a MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code that should only run after some user feedback from the MessageBox, you must use a callback function (see the function parameter for method-show for more details).

Ext.data.Store

The Store class encapsulates a client side cache of Ext.data.Model objects. Stores load data via a Ext.data.proxy.Proxy, and also provide functions for sorting, filtering and querying the Ext.data.Model instances contained within it.

Creating a Store is easy - we just tell it the Model and the Proxy to use for loading and saving its data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Set up a model to use in our Store
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });
 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             rootProperty: 'users'
         }
     },
     autoLoad: true
 });

Ext.getBody()

Returns the current document body as an Ext.dom.Element.

Ext.form.FieldSet

A container for grouping sets of fields, rendered as a HTML fieldset element. The title config will be rendered as the fieldset’s legend.

While FieldSets commonly contain simple groups of fields, they are general Containers and may therefore contain any type of components in their items, including other nested containers. The default layout for the FieldSet’s items is ‘anchor’, but it can be configured to use any other layout type.

Ext.data.Store

remoteSort:Booealn
设置为 true 则将所有的排序操作推迟到服务器. 如果设置为 false, 则在客户端本地排序.
Defaults to: false

Ext.data.reader.Reader

totalProperty:String
检索数据集中记录总数的属性名称. 只有在所有的数据集没有一次得到，而是由服务端分页得到时，该属性才需要用。
Default to:”total”

Ext.form.Basic

baseParams:Object
参数，来传递所有的请求。例如：baseParams: {id: ‘123’, foo: ‘bar’}
使用Ext.Object.toQueryString把参数编译成标准HTTP参数。

Ext.panel.AbstractPanel

bodyStyle:String/Object/Function
用户自定义CSS样式被应用到panel的body元素上，这个样式可以是一个有效的CSS样式串， 可以是一个包含样式属性名/值的对象或者是一个方法返回一个字符串或对象。 下面两种方法是等效的。

1
2
3
4
5
6
bodyStyle: 'background:#ffc; padding:10px;'
bodyStyle: {
    background: '#ffc',
    padding: '10px'
}

Ext.grid.RowNumber

此类为一个辅助类，它可以传递到Ext.grid.column.Column中作为column列配置项， 并作为一个可以自动生成数字，为每行提供编号的列。

Ext.Viewport

Ext.Viewport is a specialized container that automatically sizes itself to the size of the browser viewport and conveniently manages the sizing and positioning of components that are added to the viewport.

Ext.form.field.Text

enableKeyEvents:Boolean
true用于启用HTML输入表单项的按键事件代理
Defaults to:false

keyup( Ext.form.field.Text this, Ext.EventObject e, Object eOpts )
输入栏的keyup事件。 只有在 enableKeyEvents 被设置为true时才触发此事件。

Parameters

  • this:Ext.form.field,Text
    • 当前文本表单项
  • e:Ext.EventObject
  • eOpts:Object
    • The options object passed to Ext.util.Observable.addListener

Ext.Component

show([animateTarget], [callback], [scope])
shows this Component, rendering it first if autoRender or cfg-floating are true.
After being shown, a cfg-floating Component(such as a Ext.window.Window), is activated it and brought to the front of its z-index stack.

destroy
Destroy the Component, This methos must not be overridden because Component destruction sequence is conditional; if a beforedestroy handler returns false we must abort destruction.To add extra functionally to destruction time in a subclass, override the doDestroy method.

autoScroll:Boolean

‘true’使用溢出：’自动’的组件布局元素，并在必要时自动显示滚动条， ‘false’溢出的内容。 不能像这样定义overflowX or overflowY.

Ext.AbstractComponent

afterrender:
在组件渲染完成之后触发.afterrender 事件在当前组件被 rendered 之后, 在为组件定义的所有afterRender方法执行之后 触发.