当前位置:编程学习 > JS >>

ExtJs API的使用

首先解释什么是 API

来自百度百科的官方解释:API(Application Programming Inte易做图ce,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

ExtJs的Api必须部署到IIS上,


左侧是搜索栏,可以搜索所有的Ext的组件 我搜索的是Box,下面自动触发搜索出了包含Box的组件。

 

Properties:属性。Methods:方法。Events:事件。Config Options:配置项。Direct Link链接。

1,Config Options(配置项):


[javascript] 
01.Ext.onReady(function () { 
02.             var box = new Ext.BoxComponent({ 
03.                 autoEl: { 
04.                     tag: 'div', 
05.                     html: '配置项内部文本' 
06.                 }, 
07.                 style: 'background:red;color:#fff', 
08.                 width: 200, 
09.                 height: 200, 
10.                 renderTo: Ext.getBody() 
11.             }); 
12.         }); 
Ext.onReady(function () {
             var box = new Ext.BoxComponent({
                 autoEl: {
                     tag: 'div',
                     html: '配置项内部文本'
                 },
                 style: 'background:red;color:#fff',
                 width: 200,
                 height: 200,
                 renderTo: Ext.getBody()
             });
         });


如上所示:style,width,height,renderTo,autoEl都属于配置项,即:我们在创建一个新的组件的时候传入的 json 对象的内容。

我们以 autoEl 属性为例操作一下:

,

在Api的列表页中只对该配置项进行了简单说明,点击后进入 source code 页面查看详细说明,里面会有具体的说明和使用实例,如下所示:

 

 2,Properties:属性是我们创建对象以后,能通过该对象取到的值的。

 

[javascript] 
01.Ext.onReady(function () { 
02.            var box = new Ext.BoxComponent({ 
03.                autoEl: { 
04.                    tag: 'div', 
05.                    html: '配置项内部文本' 
06.                }, 
07.                style: 'background:red;color:#fff', 
08.                width: 200, 
09.                height: 200, 
10.                renderTo: Ext.getBody() 
11.            }); 
12.            alert(box.hidden); 
13.        }); 
Ext.onReady(function () {
            var box = new Ext.BoxComponent({
                autoEl: {
                    tag: 'div',
                    html: '配置项内部文本'
                },
                style: 'background:red;color:#fff',
                width: 200,
                height: 200,
                renderTo: Ext.getBody()
            });
            alert(box.hidden);
        });

上面alert方法弹出 false。

3.Methods:方法.
 

[javascript] 
01.Ext.onReady(function () { 
02.             var box = new Ext.BoxComponent({ 
03.                 autoEl: { 
04.                     tag: 'div', 
05.                     html: '配置项内部文本' 
06.                 }, 
07.                 style: 'background:red;color:#fff', 
08.                 width: 200, 
09.                 height: 200, 
10.                 renderTo: Ext.getBody() 
11.             }); 
1

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,