ExtJs的api文档该怎么看

写在前面

之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利,有童鞋在下面留言问extjs的API该怎么看?很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了,不知道怎么看api。那么这篇我就简单地说下extjs的api该怎么看。

ExtJs的api文档该怎么看

如果想在本地查看extjs的api,大家自行下载解压查看即可,查看方法网上很多,不再赘述。这里我们直接看extjs的在线官方文档:Ext JS 6.0.0 - Modern Toolkit ,界面如下:

API中,都是针对每个类来讲解的,每个类中又基本上都由以下4部分组成:

Config Options , 配置项 Public Properties, 公共属性 Public Methods, 公共方法 Public Events, 公共事件

1.Config Options Config Options下的内容为你在实例化一个对象时进行配置的, 这个所谓的配置选项,也就是Config Options下的内容,只有你在实例化的时候用的,也就是你在new 类名({…})时用的。下面以Panel类写个例子说明:

var subsys_grid = Ext.create('Ext.grid.Panel', {
        title:'子系统列表',
        region:'west',
        width:300,
        columnLines : true,
        striped : true,
        store : subsys_store,
        selModel:sub_selModel,
        columns : [ {
            xtype : 'rownumberer'
        }, {
            text : '编号',
            dataIndex : '编号',
            sortable:false,
            hideable : false,
            flex : 1
        }, {
            text : '名称',
            dataIndex : '名称',
            sortable:false,
            hideable : false,
            flex : 1
        }, {
            text : '描述',
            dataIndex : '描述',
            sortable:false,
            hideable : false,
            flex : 1
        }]
            });

Ext.create方法中传入了两个参数,第一个是控件的类名或别名,第二个参数就是该控件的配置项了。

我们在配置项中找到了region和width,试试对Panel的作用。将此两项改成如下:

region:'east',
width:500,

运行后,会明显的发现标题叫"子系统列表'"的Panel的位置和宽度发生明显的变化。

2.Public Properties Public Properties定义了对象的成员变量,表示的是你从一个实例化对象里取得的属性。可以直接通过点号来访问的,通常该部分都是只读的属性。比如上面的例子实例化了一个对象subsys_grid ,那么现在你可以取实例化对象的数据了。比如:subsys_grid.title就能取得Panel的标题。该部分没什么好说的,对照着看说明就是了

3.Public Methods 该部分定义了对象的能够被访问的公开方法。

比如add方法,**add ( newItems ) : Ext.Component / Ext.Component[] **,它的参数及返回值说明如下:

由上图可以看出,add方法可以接受一个对象/对象数组/组件/组件数组的参数,返回的可以是组件或者组件数组。

我们展开add方法有如下example:

var myPanel = Ext.create('Ext.Panel', {
    html: 'This will be added to a Container'
});

var items = myContainer.add([myPanel]); // Array returned
var item = myContainer.add(myPanel); // One item is returned

该例子表示的是将一个或多个组件添加到该容器中。

4.Public Events

这里以activate ( newActiveItem , this , oldActiveItem , eOpts ) 方法为例,在这个对象的listeners里,你可以监听active这个方法,这个方法有四个参数,注意::第二个参数Ext.Container this,不要在使用时,也命名变量叫this,因为它是javascript的关键字。

该事件的发生条件:Fires whenever item within the Container is activated. 直译为:每当容器内的对象被激活时,将触发改事件。

ExtJs的事件监听,除了直接在对象创建时指定listeners外,还可以在对象创建后用on方法来实现动态的添加。例如:

var sub_selModel = Ext.create('Ext.selection.CheckboxModel', {
        mode:'SINGLE'
    });
    var subCode_v = '';
    sub_selModel.on('selectionchange', function(m, selected, eOpts) {
        subCode_v = '';
        if (selected.length > 0) {
            Ext.getCmp('addtodo').setDisabled(false);
            var code = selected[0].data.编号;
            var name = selected[0].data.名称;
            subCode_v = code;
            todo_store.proxy.extraParams={sub_sys:code}
            todo_store.load();
            
        }
    });

写在最后

对于ExtJs的api文档,只要有点英文基础,掌握基本的用法,平时多加应用,Extjs终会成为你的一本快速开发的武林秘籍 。

了解更多: Sencha中文站

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kirito的技术分享

JAVA 拾遗--Future 模式与 Promise 模式

写这篇文章的动机,是缘起于微信闲聊群的一场讨论,粗略整理下,主要涉及了以下几个具体的问题: 同步,异步,阻塞,非阻塞的关联及区别。 JAVA 中有 callb...

3K10
来自专栏极客猴

Django 学习笔记之模型高级用法(上)

前面有两篇文章简单介绍 Django 的模型,这一部分算是基础知识。我自己近期也总做了下总结,将花大概两篇的篇幅来分享下模型的一些高级用法。

753
来自专栏Charlie's Road

<Solidity学习系列四>使用编译器

Solidity存储库的一个构建目标是solc,solidity命令行编译器。 使用solc --help为您提供所有选项的解释。 编译器可以生成各种输出,范围...

1582
来自专栏Golang语言社区

Golang语言 之网络

Go语言标准库里提供的net包,支持基于IP层、TCP/UDP层及更高层面(如HTTP、FTP、SMTP)的网络操作,其中用于IP层的称为Raw Socket。...

3669
来自专栏IT杂记

通过Java程序提交通用Mapreduce任务并获取Job信息

背景 我们的一个业务须要有对MR任务的提交和状态跟踪的功能,须要通过Java代码提交一个通用的MR任务(包括mr的jar、配置文件、依赖的第三方jar包),并且...

1.1K5
来自专栏Python研发

Django之Model世界

django为使用一种新的方式,即:关系对象映射(Object Relational Mapping,简称ORM)

1292
来自专栏joycl

c#面试题汇总

下面的参考解答只是帮助大家理解,不用背,面试题、笔试题千变万化,不要梦想着把题覆盖了,下面的题是供大家查漏补缺用的,真正的把这些题搞懂了,才能“以不变应万变”。...

5301
来自专栏王磊的博客

C#模拟POST表单提交 --- WebClient

WebClient:http://msdn.microsoft.com/zh-cn/library/system.net.webclient(v=VS.80)....

2945
来自专栏Java开发者杂谈

分布式改造剧集2---DIY分布式锁

1647
来自专栏零基础使用Django2.0.1打造在线教育网站

在线网站搭建(七):数据库字段的定义(上)

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

1972

扫码关注云+社区

领取腾讯云代金券