EXTJS4自学手册——EXT对象选择

最新推荐文章于 2021-02-15 20:18:38 发布
最新推荐文章于 2021-02-15 20:18:38 发布
阅读量544 收藏
点赞数
分类专栏： Extjs4.1

一、Ext对象分为3种：htm控件，EXTJS元素，EXTJS组件

二、Ext选择对象的方法：

　　选择html控件：Ext.getDom(对象的ID)

　　选择EXT元素：Ext.get(对象的ID)     

　　选择EXT组件：Ext.getCmp(对象的ID)

例子1(Ext.getDom和Ext.get方法)：

复制代码 
<html>
<head>
    <title>Index</title>
    <link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css"
        rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/ext-all-dev.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //通过Ext.get方法获取第一个文本框对象，返回的是Ext元素
            Ext.get("text1").set({
                value: 'Ext.get方法获取的Ext元素'
            });
            //通过Ext.getDom方法获取第二个文本框对象，返回的是html控件
            Ext.getDom("text2").value = "Ext.getDom方法获取的html控件";
            //通过Ext.get方法获取第三个文本框对象，返回的是Ext元素，通过Ext元素的dom属性，返回html控件
//注：通过EXT元素的dom属性，可以将EXT元素转换为对应的html控件
            Ext.get("text3").dom.value = "Ext.get方法获取的Ext元素,通过dom属性转化为html控件"
        });

    </script>
</head>
<body>
    <div id="Ext4-Panel">
        输入框1：<input type="text" id="text1" style="width:400px"/><br />
        输入框2：<input type="text" id="text2" style="width:400px"/><br />
        输入框3：<input type="text" id="text3" style="width:400px"/><br />
        <input type="button" id="show" value="展示选择结果" />
    </div>
</body>
</html>
复制代码

执行结果：

例子2(Ext.getCmp方法)：

首先，我们使用Ext.panel.Panel组件创建一个panel

复制代码 
<html>
<head>
    <title>Index</title>
    <link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css"
        rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/ext-all-dev.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //创建一个panel
            Ext.create("Ext.panel.Panel", {
                //id
                id:'myPanel',
                //标题
                title: 'Ext的panel组件',
                //渲染到id为“ExtComponent”的<div>标签
                renderTo: 'ExtComponent',
                //宽
                width: 300,
                //高
                height:300
            })
        });

    </script>
</head>
<body>
   <div id="ExtComponent">
   
   </div>
</body>
</html>
复制代码



执行结果：

通过getCmp方法获取生产的panel组件，改变他的标题

            //通过Ext.getCmp方法获取组件，改变组件的标题
            Ext.getCmp("myPanel").setTitle("使用getCmp获取组件")

执行结果：

 

注：Ext组件一般有一个方法可以把当前组件转换为Ext元素，如From组件的getForm方法，textfield组件的getEl()方法，详见EXT文档

 

三、通过CSS语法选择EXT组件

说明:在EXTJS4中，提供了query方法，通过CSS语法，查询EXTJS4组件

注：query方法返回的是一个对象集而不是单个对象

例子：

首先，我们定义一个页面：

复制代码 
<html>
<head>
    <title>Index</title>
    <link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css"
        rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/ext-all-dev.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //创建一个panel
            Ext.create("Ext.panel.Panel", {
                //标题
                title: '第一个panel',
                //渲染到id为“myPanel1”的<div>标签
                renderTo: 'myPanel1',
                //宽
                width: 300,
                //高
                height: 100,
                items: [{
                    //这个panel包含一个textfield组件
                    xtype: 'textfield',
                    name: 'name',
                    fieldLabel: 'Name'
                }, {
                    //这个panel包含一个textfield组件
                    xtype: 'textfield',
                    name: 'age',
                    fieldLabel: 'Age'
                }]
            })
            //创建一个panel
            Ext.create("Ext.panel.Panel", {
                //标题
                title: '第二个panel',
                //渲染到id为“myPanel2”的<div>标签
                renderTo: 'myPanel2',
                //宽
                width: 300,
                //高
                height: 150,
                items: [{
                    //这个panel包含另一个panel
                    xtype: 'panel',
                    height: '50',
                    items: [{
                        //被包含的panel包含一个textfield组件
                        xtype: 'textfield',
                        name: 'telephone',
                        fieldLabel: 'Telephone'
                    }]
                }, {
                    //这个panel包含一个textfield组件
                    xtype: 'textfield',
                    name: 'address',
                    fieldLabel: 'address'
                }]
            })
        });
    </script>
</head>
<body>
    <div id="myPanel1">
    </div>
    <div id="myPanel2">
    </div>
</body>
</html>
复制代码

执行结果：

获取第一个panel，通过panel的title属性：

Ext.ComponentQuery.query("panel [title=第一个panel]")[0]

获取第一个textfield：

Ext.ComponentQuery.query("textfield")[0];

注意：第一个textfield组件并不是标题为name的那个文本框（第三个才是），这是应为EXT框架会根据需要自动生成一些组件，所以在选择特定组件的时候，最好不要通过索引，而是通过特定的属性

 

获取标题为name的textfield控件

Ext.ComponentQuery.query('textfield[name=name]')


获取标题为“第二个panel”的panel组件下面的所有textfiled组件

Ext.ComponentQuery.query('panel[title=第二个panel] textfield')

 

获取标题为“第二个panel”的panel组件下一层的所有textfiled组件

Ext.ComponentQuery.query('panel[title=第二个panel]>textfield')

 

四、up、down、child方法

说明：

up：根据CSS语法获取当前组件上层的控件，如果有多个符合条件，只返回第一个

down:根据CSS语法获取当前组件下层的控件，如果有多个符合条件，只返回第一个

child:根据CSS语法获取当前组件下一层的控件，如果有多个符合条件，只返回第一个

例子：

采用讲述query方法时使用的页面

up方法：

           //获取属性name为telephone的textfield组件
            var t = Ext.ComponentQuery.query("textfield[name=telephone]")[0]
            //获取组件t上面的第一个panel组件
            t.up("panel");

child方法：

            //获取属性title为"第二个panel"的panel组件
            var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0]
            //获取组件t下面一层的属性name为“address”的textfield组件
            t.child("textfield[name=address]");

 

down方法：

         //获取属性title为"第二个panel"的panel组件
            var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0]
            //获取组件t下面一层的属性name为“address”的textfield组件
            //注意，用child方法时无法取到了，因为child方法只能取组件t下面一层的控件
            t.down("textfield[name=telephone]");
wh591344741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs4 手册中文版
04-09
ExtJs4 手册中文版，是通过整理后生成的chm文档
ExtJS4 中文文档 手册
10-15
脚本娃娃 (Ext4.1.0 Doc中文版 V1.0.0 Beta)
EXTJS4自学手册——EXT基本方法、属性（onReady、define、create）
wh591344741的专栏
04-20 1024
1.Ext.onReady 说明：onReady内的语句块会在页面上下文加载后再执行 例子： html>head> title>Indextitle> link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css" rel
EXTJS4自学手册
05-03
目录： 一 Extjs 基础 EXTJS4自学手册——EXT文件目录，本地加载文档，命名规范 EXTJS4自学手册——EXT基本方法、属性（onReady、define、create） EXTJS4自学手册——EXT基本方法、属性（apply、applyIf、constructor） EXTJS4自学手册——EXT基本方法、属性（mixins、statics、require） EXTJS4自学手册——EXT对象选择 二 Extjs 数据组件 EXTJS4自学手册——EXT数据结构组件（创建一个Model） EXTJS4自学手册——EXT数据结构组件（Model数据验证，数据交互） EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件（proxy代理类之客户端代理） EXTJS4自学手册——EXT数据结构组件（proxy代理类之服务器端代理） EXTJS4自学手册——EXT数据结构组件（store） 三、Extjs布局 EXTJS4自学手册——EXT容器布局（Auto,Anchor,Absolute,Hbox） EXTJS4自学手册——EXT容器布局（Vbox,Accordion,Table,Column） EXTJS4自学手册——EXT容器布局（Fit,Card,Border） EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件（表格） EXTJS4自学手册——页面控件（表格的特性属性） EXTJS4自学手册——页面控件（表格的插件） EXTJS4自学手册——页面控件（树形控件） EXTJS4自学手册——页面控件（表单控件）
EXTJS4自学手册——EXT数据结构组件（Model数据验证，数据交互）
wh591344741的专栏
04-20 570
一、通过在Model的fields属性后面声明validtion属性，实现数据验证 例子： script type="text/javascript"> Ext.onReady(function () { //定义一个类MyInformation,继承自Ext.data.Model
Extjs4自学手册
06-28
初学者适合，个人觉得非常好用，希望能帮到大家
包含各种类型的extjs小图标，Extjs4小图标
03-28
包含各种类型的extjs小图标，Extjs4小图标
EXT JS 4自学手册
06-05
EXTjs4自学手册.docx，适用用新手学习EXT JS 4
EXT手册EXTjs手册
06-01
EXT手册 EXTjs手册
ExtJS4 组件化编程，动态加载，面向对象，Direct
12-11
ExtJS4推荐定义类的时候均使用Ext.define，利用xtype动态加载 修改了以前的一个登陆窗口，感觉用官方推荐的方法还是很不错的 但还有一些问题没有想得非常清楚，先把代码贴出来一起研究下。请看代码中的注释~~ 使用Ext+.Net，用Direct模式传递数据 Default.aspx: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://ww
extjs direct java_ExtJS 4 组件化编程，动态加载，面向对象，Direct结合成功，目前为止我的最佳实践...
weixin_36210111的博客
02-15 108
ExtJS4中支持组件化编程和Direct，官方实例中分别提供了两种技术的示例，但没有两种方式结合的例子，经多次测试，由于4.0中存在的bug(暂时这么认为，也许是我水平烂)，两种方式结合会产生一系列问题，在静态加载、动态加载、Direct结合的过程中(尤其是采用Direct的时候，用url不会出错)，经常性的报错。官方论坛也没有相关资料，中文也没找到。分析2天源代码+调试+测试各种结合方式(ne...
Extjs 4入门 Javascript中的面向对象编程
tonyboat2090的专栏
01-02 95
1.在Javascript中直接使用对象   module("Javascript Class &amp; Extjs Class") test("Javascript Object", function() { //直接使用对象 var bob = { name : "bob", age : 13 } equal(bob.name, ...
extjs4 创建类和对象
u014004252的专栏
07-21 556
extjs4的对象创建。 EXT.define
Ext中 get、getDom、getCmp的区别
u013729963的专栏
08-15 711
原文地址  http://www.cnblogs.com/shanmu/archive/2011/08/19/2145950.html
Ext.get()和Ext.getCmp()
热门推荐
zengshuqin的专栏
07-15 2万+
ExtJS Ext.get()和Ext.getCmp()的区别 Ext.get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element 返回的是 Ext.dom.Element 对象。 Ext.getCmp( String id) 返回的是Ext.Component对象。也就是在js代码中定义的对象。  
Ext中的get、getDom、getCmp、getBody、getDoc的区别
weixin_34319374的博客
07-04 745
Ext中的get、getDom、getCmp、getBody、getDoc的区别 Ext中包含了几个 以get开头的方法，这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等，在使用中要注意区别使用。使用时注意区别调用参数及返回类型上。 1、get方法 get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象，Ext.Element类是Ex...
Ext入门基础
张 作强 BLOG
08-06 403
要学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及Component三者之间的区别。     每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)     仅仅有DOM是不够的，...
ExtJs之Ext.getCmp
weixin_33935777的博客
03-22 197
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;ExtJs&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;link re
【ExtJS】各种获取元素组件方法
weixin_30950237的博客
09-08 152
1、get()、getDom()、getCmp()、getBody()、getDoc()： 　　get(id/obj): 　　　　get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象， Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对象，可以通过Element对象 上的方法来实现对DOM指定的操作...
extjs4 api官网
最新发布
11-18
extjs4是一个功能强大的JavaScript框架，用于构建交互式的Web应用程序。它提供了丰富的组件和工具，帮助开发人员快速创建现代化的用户界面。extjs4的API官网为开发人员提供了详细的文档和示例，帮助他们更好地了解和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值