『ExtJS』01 007. ExtJS 4 查找组件

Ext JS 4 使用一个新的帮助类（Ext.ComponentQuery）来使用类似CSSXPath风格的选择器去获取ExtJS组件。

在本文中，我们将展示如何使用Ext.ComponentQuery类来获得帮助信息以指定一个小应用内的组件。

准备工作

我们将创建一个简单的应用，由一个带工具条、按钮、表单、grid的Ext.panel.Panel。

Language: JavaScript

Framework: ExtJS 4.1.1a

IDE: Excplise J2EE + Spket

   1: var panel = Ext.create('Ext.panel.Panel', {
   2:     height : 500,
   3:     wight : 500,
   4:     renderTo : Ext.getBody(),
   5:     layout : {
   6:         type : 'vbox',
   7:         align : 'stretch'
   8:     },
   9:     items : [{
  10:         xtype : 'tabpanel',
  11:         itemId : 'mainTabPanel',
  12:         flex : 1,
  13:         items : [{
  14:                     xtype : 'panel',
  15:                     title : 'Users',
  16:                     id : 'userPanel',
  17:                     layout : {
  18:                         type : 'vbox',
  19:                         align : 'stretch'
  20:                     },
  21:                     tbar : [{
  22:                                 xtype : 'button',
  23:                                 text : 'Edit',
  24:                                 itemId : 'editButton'
  25:                             }],
  26:                     items : [{
  27:                                 xtype : 'form',
  28:                                 border : 0,
  29:                                 items : [{
  30:                                             xtype : 'textfield',
  31:                                             fieldLabel : 'Name',
  32:                                             allowBlank : false
  33:                                         }, {
  34:                                             xtype : 'textfield',
  35:                                             fieldLabel : 'Email',
  36:                                             allowBlank : false
  37:                                         }],
  38:                                 buttons : [{
  39:                                             xtype : 'button',
  40:                                             text : 'Save',
  41:                                             action : 'saveUser'
  42:                                         }]
  43:                             }, {
  44:                                 xtype : 'grid',
  45:                                 flex : 1,
  46:                                 border : 0,
  47:                                 columns : [{
  48:                                             header : 'Name',
  49:                                             dataIndex : 'Name',
  50:                                             flex : 1
  51:                                         }, {
  52:                                             header : 'Email',
  53:                                             dataIndex : 'Email'
  54:                                         }],
  55:                                 store : Ext.create('Ext.data.Store', {
  56:                                             fields : [],
  57:                                             data : [{
  58:                                                         Name : 'Joe Blogs',
  59:                                                         Email : 'joe@example.com'
  60:                                                     }, {
  61:                                                         Name : 'Jane Doe',
  62:                                                         Email : 'jane@example.com'
  63:                                                     }]
  64:                                         })
  65:                             }]
  66:                 }]
  67:     }, {
  68:         xtype : 'conponent',
  69:         itemId : 'footerComponent',
  70:         html : 'Footer Information',
  71:         extraOptions : {
  72:             option1 : 'test',
  73:             option2 : 'test'
  74:         },
  75:         height : 40
  76:     }]
  77: });

如何去做

Ext.ComponentQuery类的主方法是query()。它接收一个CSS/XPath类型的选择器字符串，然后返回一个匹配Ext.Component（或其子类）数组实例。

  1. 基于xtype查找组件: var panels = Ext.ComponentQuery.query('panel');
  2. 查找二级xtype：var buttons = Ext.ComponentQuery.query('panel button');
  3. 基于属性值检索组件：var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
  4. 混合查找组件：var buttonsAndTextfields = Ext.ComonentQuery.query('button, textfield');
  5. 基于ID查找组件：var usersPanel = Ext.ComponentQuery.query('#usersPanel');
  6. 基于组件的presence（不太明白这个应该怎么翻译）：var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');
  7. 使用组件的成员方法查找：var validField = Ext.ComponentQuery.query('form > textfield{isValid()}'); 

   1: var panels = Ext.ComponentQuery.query('panel');
   2: var buttons = Ext.ComponentQuery.query('panel button'); 
   3: var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
   4: var buttonsAndTextfields = Ext.ComonentQuery.query('button, textfield');
   5: var usersPanel = Ext.ComponentQuery.query('#usersPanel');
   6: var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');
   7: var validField = Ext.ComponentQuery.query('form > textfield{isValid()}');
posted @ 2012-11-28 15:58  莫不逢  阅读(4711)  评论(0)  编辑  收藏  举报