`
cyd198633
  • 浏览: 25419 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Ext.get() 和 Ext.query() 取元素方式

 
阅读更多
想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query()的组合(个人推荐)方式。
前面写的get()和query()我都省略参数了,先看看文档中的函数原型:
Ext.get( Mixed el ) : Element
Parameters:
el : Mixed
The id of the node, a DOM Node or an existing Element.
Returns:
Element
The Element object

Ext.query( String path, [Node root] ) : Array
Parameters:
path : String
The selector/xpath query
root : Node
(optional) The start of the query (defaults to document).
Returns:
Array

query函数返回的其实是一个DOM Node的数组,而Ext.get的参数el可以是DOM Node,哈哈,明白了吗?就是说要实现最灵活的取法,应该用query取到DOM Node然后交给get去变成Element。也就是:

var x=Ext.query(QueryStr);

//我为什么不写成内联函数形式?因为这里的x只能是一个元素,而上面那句的x是一个Array,大家自己转换和处理吧

var y=Ext.get(x);

那么接下来需要介绍QueryStr的格式(其实和jQuery里的selector的格式很像啦),至于获得Element后可以干些啥,大家自己去看ExtJS文档里关于Ext.Element的说明,我就不摘过来了。

先给一个html代码,好做演示说明
(1)根据标记取:

Ext.query(“span”);            // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。

Ext.query(“span”, “foo”);  // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。

Ext.query(“div p”);             // 这会返回有一个元素的数组,内容为div标签下的p标签

Ext.query(“div span”);      // 这会返回有两个元素的数组,内容为div标签下的span标签

(2)根据ID取:

Ext.query(“#foo”);                         //这个查询会返回包含我们一个id为foo的元素的数组!或者直接Ext.get(“foo”);

(3)根据class的Name去取:Ext.query(“.foo”); // 这个查询会返回多个含有class为foo的元素的数 组。

Ext.query(“*[class]“);

(4)万能法去取:(用这个方法可以通过id、name、class、css等取)

Ext.query(“*[class=bar]“);                           // 这会得到class等于“bar”的所有元素

Ext.query(“*[class!=bar]“);                          // 这会得到class不等于“bar”的所有元素

Ext.query(“*[class^=b]“);                              // 这会得到class从“b”字头开始的所有元素

Ext.query(“*[class$=r]“);                               //这会得到class由“r”结尾的所有元素

Ext.query(“*[class*=a]“);                               //这会得到在class中抽出“a”字符的所有元素

Ext.query(“*[name=BlueLotus7]“);            //这会得到name等于“BlueLotus7”的所有元素
分享到:
评论

相关推荐

    Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式

    前面写的get()和query()我都省略参数了,先看看文档中的函数原型: Ext.get( Mixed el ) : Element Parameters: el : Mixed The id of the node, a DOM Node or an existing Element. Returns: Element The Element ...

    Ext Js权威指南(.zip.001

    6.1.2 使用ext.query选择页面元素 / 215 6.1.3 基本选择符 / 223 6.1.4 属性选择符 / 229 6.1.5 css属性值选择符 / 234 6.1.6 伪类选择符 / 235 6.1.7 扩展选择器 / 248 6.1.8 ext.domquery的使用方法 / 249 ...

    EXTJS总结.txt

    1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注:享元模式(Flyweight Design ...

    ExtJSWeb应用程序开发指南(第2版)

    6.2.4 Ext.query() 6.2.5 Ext.getCmp() 6.2.6 Ext.getDom() 6.2.7 Ext.isEmpty() 6.2.8 Ext.namespace() 6.2.9 Ext.each() 6.2.1 0Ext.apply() 6.2.1 1Ext.encode() 6.2.1 2Ext.htmlDecode...

    Ext深入浅出 数据传输

    11.1.3 query函数和select函数.....260 11.1.4 encode函数和decode函数...263 11.1.5 extend函数.............................265 11.1.6 apply和applyIf函数..........266 11.1.7 namespace函数.....................

    Vs2005+Access+Extjs三层架构源码

    Ext.aspx: ExtJs格式文件 List.aspx: Asp.net文件 一、Extjs文件如:友情链接 A、文件名称 说明:表名大小写与菜单的modulecode填写一致 1、删除文件:Del+表名.js 2、编辑文件:Edit+表名.js 3、列表文件...

    DN资源查看器

    GL_EXT_timer_query GL_EXT_transform_feedback GL_EXT_vertex_array GL_EXT_vertex_array_bgra GL_EXT_vertex_attrib_64bit GL_IBM_texture_mirrored_repeat GL_KTX_buffer_region GL_NV_blend_square GL_NV_...

    Java邮件开发Fundamentals of the JavaMail API

    While this does centralize backups, as users' long-term mail folders get larger and larger, everyone suffers when disk space is exhausted. With POP, saved messages get offloaded from the mail ...

    PHP连接MSSQL2005的扩展插件.

    /* Execute the query. */ $stmt = sqlsrv_query($conn, $tsql, $params); if( $stmt === false ) { echo "Error in statement execution.</br>"; die( print_r( sqlsrv_errors(), true)); } /* Retrieve the ...

    php.ini-development

    ;;;;;;;;... 1.... 2.... 3.... 4.... 5.... 6.... The syntax of the file is extremely simple.... Section headers (e.g.... at runtime.... There is no name validation.... (e.g.... previously set variable or directive (e.g....

    高性能服务框架ZYS.zip

    $fileinfo = array('type'=>'file','data'=>array('path' =>'/public/uploads/'.date('Ymd').'/'.$filename,'size'=>$_FILES['file']['size'],'ext'=>$upname[1])); var_dump(distributed::getInstance()->query...

    linux.chm文档

    chattr +a file1 只允许以追加方式读写文件 chattr +c file1 允许这个文件能被内核自动压缩/解压 chattr +d file1 在进行文件系统备份时,dump程序将忽略这个文件 chattr +i file1 设置成不可变的文件,不能被...

    gl-bench:GL具有CPUGPU负载的WebGL性能监视器

    gl-bench WebGL性能监视器,显示GPU / CPU负载的百分比。 屏幕截图 范例/ e2e测试 利弊 优点 缺点 CPU / GPU百分比负载 仅随ES6类提供 酷主题和记录器 ... 版本1使用了EXT_disjoint_timer_query扩展

    DX1.5 手机正式版

    $query_string .= $_GET['mod'] = $param[0]; array_shift($param); $paramc = count($param); for($i = 0;$i $paramc;$i+=2) { $_REQUEST[$param[$i]] = $_GET[$param[$i]] = $param[$i + 1]; $query_string .= ‘&...

    Bochs - The cross platform IA-32 (x86) emulator

    - new hdimage method get_capabilities() that can return special flags - vmware3, vmware4 and vvfat classes now return HDIMAGE_HAS_GEOMETRY flag - other disk image modes by default return HDIMAGE_...

Global site tag (gtag.js) - Google Analytics