Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解

1 2 3 4

Ext.define( "MyApp.controller.Foo" ,{       extend: "Ext.app.Controller" ,       refs:[{ref: 'list' ,           selector: 'grid' }],});

这将会产生一个this.getList()方法，该方法会通过Ext.ComponentQuery去页面中获取组件为grid的组件

The following fields can be used in ref definition:

• ref - name of the reference.

• selector - Ext.ComponentQuery selector to access the component.

• autoCreate - 如果在页面中找不到该组件，是否自动创建

• forceCreate - 强制在每次访问该组件的时候都自动创建一次

• xtype - 要创建的组件xtype类型. If you don't provide xtype, an Ext.Component instance will be created.

Ext.ComponentQuery

1.#myPanel 根据id获取

2.panel#myPanel xtype类型为panel，并且id为myPanel的，缩小查找范围

3.CSS选择器

• E F All descendant Components of E that match F

• E > F All direct children Components of E that match F

• E ^ F All parent Components of E that match F

window[title="Input form"] textfield[name=login]^ form > button[action=submit]

以为：title为“Input form”的window，里面name=login的文本框，所属的form下面的action=submit的按钮

4.属性

component[autoScroll]，组件中含有autoScroll=true的

panel[title="Test"]，组件xtype为panel并且title为test的

　　component[?autoScroll]，组件中含有autoScroll，无论其值是多少

5.模糊定位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Ext.ComponentQuery.query( 'panel[cls=my-cls]' ); //可以找到 Ext.create( 'Ext.window.Window' , {      cls:  'my-cls' }); //但找不到 Ext.create( 'Ext.panel.Panel' , {       cls:  'foo-cls my-cls bar-cls'   }); /***********************************/ Ext.ComponentQuery.query( 'panel[cls~=my-cls]' ); //可以同时找到上面两个组件 /***********************************/ Ext.ComponentQuery.query( 'panel[title^=Sales]' ); //Title以Sales开头的Panel /***********************************/ Ext.ComponentQuery.query( 'field[fieldLabel$=name]' ); //fieldlabel以name结尾的 Ext.create( 'Ext.form.field.Text' , {      fieldLabel:  'Enter your name' }); /***********************************/

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// retrieve all Ext.Panels in the document by xtype var  panelsArray = Ext.ComponentQuery.query( 'panel' ); // retrieve all Ext.Panels within the container with an id myCt var  panelsWithinmyCt = Ext.ComponentQuery.query( '#myCt panel' ); // retrieve all direct children which are Ext.Panels within myCt var  directChildPanel = Ext.ComponentQuery.query( '#myCt > panel' ); // retrieve all grids or trees var  gridsAndTrees = Ext.ComponentQuery.query( 'gridpanel, treepanel' ); // Focus first Component myFormPanel.child( ':focusable' ).focus(); // Retrieve every odd text field in a form myFormPanel.query( 'textfield:nth-child(odd)' ); // Retrieve every even field in a form, excluding hidden fields myFormPanel.query( 'field:not(hiddenfield):nth-child(even)' );

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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

/* 商品控制层, 所有逻辑代码都在这里写 */ Ext.define( 'keel.controller.GoodsCtrl' , {      extend:  'Ext.app.Controller' ,      stores: [ 'GoodsStore' ], //声明该控制层要用到的store      models: [ 'GoodsModel' ], //声明该控制层要用到的model      views: [ 'goods.GoodsListView' , 'goods.GoodsWinView' ], //声明该控制层要用到的view      refs: [ //相当于一个映射,这样就可以在控制层方便的通过geter取得相应的对象了          {              ref:  'goodslistview' ,              selector:  'goodslistview'          },          {              ref:  'goodswinview' ,              selector:  'goodswinview'          }      ],      init:  function () {          this .control({ //这里的this相当于这个控制层              'viewport > goodslistview' : {                  afterrender:  function (gp){ //侦听goodslistview渲染                      gp.down( 'button[action=testBtn1]' ).on( 'click' , function (){                          //侦听goodslistview工具条上action=testBtn1的按钮单击事件                          this .showWin();                      }, this );                                              gp.down( 'button[action=testBtn2]' ).on( 'click' , function (){                          //侦听goodslistview工具条上action=testBtn2的按钮单击事件                          alert( this .getGoodslistview().title)                      }, this );                  }              },              'goodswinview button[action=ok]' : {                  //侦听goodswinview中action=ok的按钮单击事件                  click:  function (){                      this .getGoodswinview().setTitle(Ext.util.Format.date( new  Date (), 'Y-m-d H:i:s' ));                  }              }          });      },      showWin :  function (){          Ext.create( 'keel.view.goods.GoodsWinView' ).show();          } });

本文转自yunlielai51CTO博客，原文链接：http://blog.51cto.com/4925054/1363413 ，如需转载请自行联系原作者