看懂ExtJS的API

简介:

ExtJS的功能很强大,相应的其API也很庞大,并且看起来并不是很轻松。首先是纯英文的东西,大脑的第一反应就有点迟钝,然后是整页整页的配置、属性、方法、事件等,看上去真的可谓是眼花缭乱。所以本文的目的就是告诉大家如何轻松的看懂ExtJS的API。

进入API文档

当你下载了ExtJS之后,不妨在IIS中为ExtJS新建一个网站,访问该网站的主页,你会看到如下的页面:

image

点击API Docs进入ExtJS的API文档。

定位你的目标

进入API后,你会看到如下界面:

image

这个页面中,左侧是一个导航栏,顶部有一个搜索框,剩下的就是一个内容部分了。通过导航栏可以快速的找到我们要查看的内容,而顶部的搜索框则可以为我们提供全局的搜索功能,方便我们在目标不明确的时候找到内容。

详细的页面元素说明

image

  在页面的上方,我们可以看到有一个图标指示该类是一个单例类还是一个组件。如果是一个组件,那么就会显示xtype属性。(一定要分清哪个是类,哪个是组件哦,不然以后使用起来就麻烦许多了)

  在类名下面会根据具体类的情况显示如下菜单项:Configs、Properties、Methods、Events、Super Classes和Sub Classes。接着还有一个搜索框,可通过它来查询该类的特定属性、配置项、方法等等。

  对于某些类的描述,API文档中会列出一些实例,并且某些实例提供了即时预览的功能,方便我们查看代码执行效果。

  在页面的右边,会展现类的Alternate Names、Hierarchy和Mixns的信息。

  当大家打开API文档时会发现有些方法被标记为deprecate,就是说这些方法已被弃用了。

  在API文档的右上角我们可以看到一个搜索框,通过它可以在整份文档中搜索特定的类、方法、配置项、属性、事件、组合。

  当然API文档还提供了官方的guides文档,让大家更容易入手Ext。

<本段内容摘自:http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html>

使用配置项

在Button 示例代码中,我们看到创建Button的代码如下:

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function () {
        alert('You clicked the button!');
    }
});

 

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

我们在configs中找到了width和height,试试对Button的作用。在配置中加入这两项:

width: 100,
height: 30,

然后运行,看看我们得到的Button样式:

image

添加事件

Button的事件可以通过handler配置项来添加click事件,但Button的其它事件就不能这样处理了。要为Button添加更多的事件,需要在配置想中添加listener,Button的真正用到的事件不多,我这里以TreePanel为例(其实所有控件都是这样添加事件的)

var treePanel = Ext.create('Ext.tree.Panel', {
    title: '',
    width: 200,
    height: 300,
    store: treeStore,
    rootVisible: true,
    useArrows: true,
    lines: true,
    listeners: {
        render: function (self, opts) {
            alert('render');
        },
        afterrender: function (self, opts) {
            alert('afterrender');
        },
        activate: function (self, opts) {
            alert('activate');
        }
    },
    renderTo: 'tree'
});

这里为TreePanel添加了三个事件。

如果要在代码中条件性的添加或删除事件,那就用到Method了。

调用Method

接着上面的示例代码,如果要通过代码为TreePanel添加或移除select事件,我们就可以通过Methods查找相应的方法,我这里直接给出代码:

//select事件处理函数
var selectHandler = function () {
    alert('select event');
}
//添加select事件
treePanel.on('select', selectHandler, treePanel);
//移除select事件
treePanel.un('select', selectHandler, treePanel);

 

小结:有句老话叫做“书读百遍……”道理很朴实,只要你坚持的看下去,就一定能够熟练的阅读ExtJS 的API文档。如果还有那里不懂,请留言或私信联络,共同学习。




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2013/03/05/2944004.html,如需转载请自行联系原作者

相关文章
|
JSON API 数据格式
|
JavaScript API
|
13天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
7天前
|
JSON 搜索推荐 API
京东店铺所有商品接口系列(京东 API)
本文介绍如何使用Python调用京东API获取店铺商品信息。前期需搭建Python环境,安装`requests`库并熟悉`json`库的使用。接口采用POST请求,参数包括`app_key`、`method`、`timestamp`、`v`、`sign`和业务参数`360buy_param_json`。通过示例代码展示如何生成签名并发送请求。应用场景涵盖店铺管理、竞品分析、数据统计及商品推荐系统,帮助商家优化运营和提升竞争力。
53 23
|
6天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
24 12
|
5天前
|
供应链 监控 数据挖掘
1688 商品详情接口系列(1688 API)
1688商品详情接口系列(1688 API)是阿里巴巴旗下批发电商平台提供的强大工具,支持开发者、商家获取商品的详细信息。通过商品基本信息、价格库存、图片和描述查询接口,用户可以精准高效地获取商品数据,涵盖电商运营、数据分析、市场调研等领域,极大提升工作效率。示例代码展示了如何使用Python调用这些接口,助力电商平台整合、价格监控、商品展示优化及库存管理等应用场景。
|
19天前
|
JSON API 数据格式
京东商品SKU价格接口(Jd.item_get)丨京东API接口指南
京东商品SKU价格接口(Jd.item_get)是京东开放平台提供的API,用于获取商品详细信息及价格。开发者需先注册账号、申请权限并获取密钥,随后通过HTTP请求调用API,传入商品ID等参数,返回JSON格式的商品信息,包括价格、原价等。接口支持GET/POST方式,适用于Python等语言的开发环境。
74 11
|
10天前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。

热门文章

最新文章