`

《ExtJS2.0实用简明教程》之组件的使用(转载)

阅读更多
 组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new Ext.Window(),创建一个表格则使用new Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性及值,组件根据构造函数中的参数属性值来初始化组件。比如下面的例子:
<script>
var obj={title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'};
var panel=new Ext.Panel(obj);
panel.render("hello");
</script>
<div id="hello">&nbsp;</div>

  运行上面的代码可以实现如下图所示的结果:

  可以省掉变量obj,直接写成如下的形式:

var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
panel.render("hello");

  render方法后面的参数表示页面上的div元素id,也可以直接在参数中通过renderTo参数来省略手动谳用render方法,只需要在构造函数的参数中添加一个renderTo属性即可,如下:

new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

  对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要父组件的构造函数中,通过给属性items传递数组方式实现构造。如下面的代码: 

var panel=new Ext.TabPanel({width:300,height:200,items:[
{title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30}]
});
panel.render("hello");

  注意中括号中加粗部份的代码,这些代码定义了TabPanel这个容器控件中的子元素,这里包括三个面板。上面的代码与下面的代码等价:

var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel(
{title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]
});
panel.render("hello");

  前者不但省略掉了new Ext.Panel这个构造函数,最重要前者只有在初始化TabPanel的时候,才会创建子面板,而第二种方式则在程序一开始就会创建子面板。也就是说,前者实现的延迟加载。

 

 

转载:EasyJF开源的冷雨

 

分享到:
评论

相关推荐

    ExtJS2.0实用简明教程

    ExtJS2.0实用简明教程 教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等,是一个非常适合新手的ExtJS入门教程。

    Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample

    本教程主要聚焦于ExtJS 2.0版本的核心API,帮助开发者深入理解和运用这个框架。 **一、ExtJS基本概念** 1. **组件(Components)**: ExtJS的核心是其组件系统,包括按钮、表格、面板、窗口等,这些组件构建了整个...

    ExtJS2.0实用简明教程(chm)文档

    "ExtJS2.0实用简明教程(chm)文档"可能是这个压缩包中的主要资源,它提供了一个深入学习ExtJS 2.0的指南。CHM文件是Microsoft的 Compiled HTML Help 格式,通常包含一系列组织良好的网页,便于用户查阅和学习。这个...

    ExtJS2.0实用简明教程_PDF

    最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA 系统也正在使用ExtJS2.0 进行改造,使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习 ExtJS 的一些心得及小结,希望能帮助正在...

    ExtJS 2.0实用简明教程(chm)

    本教程“ExtJS 2.0实用简明教程”是针对这个版本进行深入学习的宝贵资源,适合有一定JavaScript基础并希望提升前端开发技能的人员。 该教程以`.chm`格式提供,这是一种Windows平台上的帮助文件格式,包含了索引、...

    ExtJS2.0简明教程

    ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架...本教程主要是针对ExtJS2.0 进行介绍,全部代码、截图等都是基于ExtJS2.0。

    ExtJS 2.0实用简明教程

    8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格...

    ExtJS 2.0实用简明教程.rar

    ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

    ExtJS2.0.rar_extjs2.0

    这个"ExtJS2.0.rar"压缩包包含了关于如何使用ExtJS 2.0的资源,特别是"ExtJS2.0实用简明教程.chm",这是一份详细的指导文档,可以帮助开发者快速掌握该框架的核心概念和技术。 ExtJS 2.0的主要特点包括: 1. **...

    Ext2.0实用简明教程

    **Ext2.0实用简明教程** 在Web开发领域,ExtJS是一个强大的JavaScript库,用于构建用户界面。本文档将详细介绍ExtJS 2.0版本,帮助开发者快速掌握其核心概念和常用功能。 **一、序** 在互联网应用日益复杂的今天...

    ExtJS 2.0 实用简明教程之布局概述

    ExtJS的容器组件包含一个layout及layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,该布局只是简单的把元素放到...

    ExtJs2.0简明教程

    ### ExtJs2.0简明教程 #### 一、ExtJS简介 ExtJS是一款基于JavaScript的前端框架,它提供了一套完整的用户界面解决方案,能够帮助开发者快速构建高性能、跨浏览器的Web应用程序。ExtJS2.0是该框架的一个重要版本,...

Global site tag (gtag.js) - Google Analytics