Example of refs and ext.componentquery parsing using extjs4.x Controller

Refs:object[]5

Array of Configs to build up references to views on page. For example:

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

This will result in a this.getlist () method that takes a component that is a grid component from the Ext.componentquery page

The following fields can is used in ref definition:

• ref  -name of The reference.

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

• auto Create  -If the component is not found in the page, automatically creates a

• forcecreate  -forces the

• xtype  -The type of component Xtype to create. If you don ' t provide xtype, an ext.component instance'll be a created.

Ext.componentquery

1. #myPanel Access by ID

2.panel#mypanel xtype type is panel, and the ID is mypanel, narrow the lookup range

3.CSS Selector

• E FAll descendant components of the E that match F

• E > FAll Direct children components of the E that match F

• E ^ FAll the parent components of the E that match F

window[title= "Input form"] textfield[name=login]^ form > Button[action=submit] thought: "Input form" window, inside name =login text box, the button that belongs to the action=submit below the form

4. Properties

　　component[AutoScroll], the component contains autoscroll=true

　　panel[title= "Test"], the component xtype is panel and the title is test

Component[?autoscroll], the component contains AutoScroll, regardless of its value

5. Fuzzy positioning

Ext.ComponentQuery.query (' panel[cls=my-cls] ');//Can find Ext.create (' Ext.window.Window ', {     cls:  ' my-cls ');//But cannot find Ext.create (' Ext.panel.Panel ', {     cls:  ' Foo-cls my-cls bar-cls '  });/***********************************/ext.componentquery.query (' Panel [CLS~=MY-CLS],//Can be found at the same time the above two components/***********************************/ext.componentquery.query (' panel[title^= Sales] ');//title panel/***********************************/ext.componentquery.query (' field[fieldlabel$ ', which starts with sales) =name]//fieldlabel ext.create (' Ext.form.field.Text ', {    fieldlabel: ) ending with name ' Enter your name '});// retrieve all ext.panels in the document by  xtypevar panelsarray = ext.componentquery.query (' panel ');// retrieve all  Ext.panels within the container with an id myctvar panelswithinmyct  = ext.comPonentquery.query (' #myCt  panel ');// retrieve all direct children which are  ext.panels within myctvar directchildpanel = ext.componentquery.query (' #myCt  > panel ');// retrieve all grids or treesvar gridsandtrees =  ext.componentquery.query (' Gridpanel, treepanel ');// focus first  Componentmyformpanel.child (': focusable '). focus ();// retrieve every odd text field  in a formmyformpanel.query (' Textfield:nth-child (odd) ');// retrieve every even  field in a form, excluding hidden fieldsmyformpanel.query (' Field:not ( HiddenField): Nth-child (even) ');/* Commodity control layer, all logic codes are written here */ext.define (' Keel.controller.GoodsCtrl ', {     extend:  ' Ext.app.Controller ',     stores: [' Goodsstore '],// Declare the store    models: [' Goo to be used by the control layerDsmodel '],//declares the model    views: [' goods to be used by the control layer. Goodslistview ', ' goods. Goodswinview '],//declares that the control layer will use a view    refs: [//equivalent to a mapping, so that the control layer can be conveniently obtained by geter the corresponding object          {             ref:  ' Goodslistview ',             selector:  ' Goodslistview '         },         {            ref:  ' Goodswinview ',            selector:  ' Goodswinview '         }    ],     init: function ()  {        this.control ({// Here this is equivalent to this control layer         &NBsp;    ' Viewport > goodslistview ': {                 afterrender: function (GP) {//Listen Goodslistview render                       gp.down (' button[action=testbtn1] '). On (' click ', Function () {                         // Listen for ACTION=TESTBTN1 button click events on the Goodslistview toolbar                          this.showwin ();                     }, This);                                             gp.down (' button[action=testbtn2] '). On (' click ', Function () {                          //Listen for ACTION=TESTBTN2 button click events on Goodslistview Toolbar                          alert ( This.getgoodslistview (). title)                      },this);                 }            } ,             ' Goodswinview button[action=ok] ' :  {                //Listening for button click events in 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 ();         }});

Example of refs and ext.componentquery parsing using extjs4.x Controller