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.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.模糊定位
  

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'
});
/***********************************/

6.条件组合查找

//and
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
//or
Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');

7.伪类(preudo classes),筛选结果

  • not Negates a selector.
  • first Filters out all except the first matching item for a selector.
  • last Filters out all except the last matching item for a selector.
  • focusable Filters out all except Components which are currently able to recieve focus.
  • nth-child Filters Components by ordinal position in the selection.
// Select first direct child button in any panel
Ext.ComponentQuery.query('panel > button:first'); // Select last field in Profile form
Ext.ComponentQuery.query('form[title=Profile] field:last'); // Find first focusable Component in a panel and focus it
panel.down(':focusable').focus(); // Select any field that is not hidden in a form
form.query('field:not(hiddenfield)');

8.例子

// 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)');
 
 
 

Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析的更多相关文章

  1. Extjs4 MVC Controlller中refs使用

    前面几篇写了一下mvc的整体使用方法,今天写一下controller中refs的试用,refs的作用类似于我们告诉controller我们的一个元素的别名,既alias,那么controller就会为 ...

  2. Spring MVC Controller中解析GET方式的中文参数会乱码的问题(tomcat如何解码)

    Spring MVC Controller中解析GET方式的中文参数会乱码的问题 问题描述 在工作上使用突然出现从get获取中文参数乱码(新装机器,tomcat重新下载和配置),查了半天终于找到解决办 ...

  3. spring mvc controller中获取request head内容

    spring mvc controller中获取request head内容: @RequestMapping("/{mlid}/{ptn}/{name}") public Str ...

  4. Spring MVC Controller中GET方式传过来的中文参数会乱码的问题

    Spring MVC controller 这样写法通常意味着访问该请求,GET和POST请求都行,可是经常会遇到,如果碰到参数是中文的,post请求可以,get请求过来就是乱码.如果强行对参数进行了 ...

  5. spring mvc Controller中使用@Value无法获取属性值

    在使用spring mvc时,实际上是两个spring容器: 1,dispatcher-servlet.xml 是一个,我们的controller就在这里,所以这个里面也需要注入属性文件 org.sp ...

  6. spring mvc controller中的异常封装

    http://abc08010051.iteye.com/blog/2031992 一直以来都在用spring mvc做mvc框架,我使用的不是基于注解的,还是使用的基于xml的,在controlle ...

  7. 二、ASP.NET MVC Controller 控制器(一:深入解析控制器运行原理)

    阅读目录: 1.开篇介绍 2.ASP.NETMVC Controller 控制器的入口(Controller的执行流程) 3.ASP.NETMVC Controller 控制器的入口(Controll ...

  8. NET/ASP.NET MVC Controller 控制器(一:深入解析控制器运行原理)

    阅读目录: 1.开篇介绍 2.ASP.NETMVC Controller 控制器的入口(Controller的执行流程) 3.ASP.NETMVC Controller 控制器的入口(Controll ...

  9. 在ASP.NET MVC 框架中调用 html文件及解析get请求中的参数值

    在ASP.NET MVC 框架中调用 html文件: public ActionResult Index() { using (StreamReader sr = new StreamReader(P ...

随机推荐

  1. Keras 2.0版本运行

    Keras 2.0版本运行demo出错: d:\program\python3\lib\site-packages\ipykernel_launcher.py:8: UserWarning: Upda ...

  2. 如何更新 Visual Studio 2017 的离线安装包

    现在 Visual Studio 2017 已经不再使用原来的 iso 镜像提供离线安装包了,需要的话,可以通过命令行参数下载离线安装包,例如: vs_Enterprise.exe --layout ...

  3. 【Android API】Android 4.1 API官方文档详解

    原文:http://android.eoe.cn/topic/summary 翻译:[eoeAndroid原创团队]kris.流风而逝.贼寇在何方.snowxwyo.lsy4833406 更新日期:2 ...

  4. [tools]hugo&github构建静态网站/百度统计

    hugo/github构建网站基本原理 1.hugo是一个静态化的工具,你写md,然后他把md转换成对应样式的html, 2.并给html嵌入百度统计的script.然后你将html放到github上 ...

  5. haproxy 配置https 同时技持443 80端口

    确定haproxy支持https [root@c01 sbin]# ldd haproxy |grep ssl libssl.so.10 => /usr/lib64/libssl.so.10 ( ...

  6. 在/etc/my.cnf未配置 [clIent] 导到mysql找不到socket

    [root@DB mysql-5.6.16]# ./bin/mysql ERROR 2002 (HY000): Can't connect to local MySQL server through ...

  7. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

  8. NonWindowJoin

    package org.apache.flink.table.runtime.join /** * Connect data for left stream and right stream. Bas ...

  9. npm WARN build `npm build` called with no arguments. Did you mean to `npm run-script build`?

    跑npm build结果如下: npm WARN build `npm build` called with no arguments. Did you mean to `npm run-script ...

  10. Gunicorn使用详解

    1.什么是Gunicorn Gunicorn是一个WSGI HTTP服务器,python自带的有个web服务器,叫做wsgiref, Gunicorn的优势在于,它使用了pre-fork worker ...