Ext JS 4 使用一个新的帮助类(Ext.ComponentQuery)来使用类似CSSXPath风格的选择器去获取ExtJS组件。
在本文中,我们将展示如何使用Ext.ComponentQuery类来获得帮助信息以指定一个小应用内的组件。
准备工作
我们将创建一个简单的应用,由一个带工具条、按钮、表单、grid的Ext.panel.Panel。
Language: JavaScript
Framework: ExtJS 4.1.1a
IDE: Excplise J2EE + Spket
'Ext.panel.Panel', {
2: height : 500,
3: wight : 500,
4: renderTo : Ext.getBody(),
5: layout : {
'vbox',
'stretch'
8: },
9: items : [{
'tabpanel',
'mainTabPanel',
12: flex : 1,
13: items : [{
'panel',
'Users',
'userPanel',
17: layout : {
'vbox',
'stretch'
20: },
21: tbar : [{
'button',
'Edit',
'editButton'
25: }],
26: items : [{
'form',
28: border : 0,
29: items : [{
'textfield',
'Name',
false
33: }, {
'textfield',
'Email',
false
37: }],
38: buttons : [{
'button',
'Save',
'saveUser'
42: }]
43: }, {
'grid',
45: flex : 1,
46: border : 0,
47: columns : [{
'Name',
'Name',
50: flex : 1
51: }, {
'Email',
'Email'
54: }],
'Ext.data.Store', {
56: fields : [],
57: data : [{
'Joe Blogs',
'joe@example.com'
60: }, {
'Jane Doe',
'jane@example.com'
63: }]
64: })
65: }]
66: }]
67: }, {
'conponent',
'footerComponent',
'Footer Information',
71: extraOptions : {
'test',
'test'
74: },
75: height : 40
76: }]
77: });