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: });

相关文章: