ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

天介绍一下Ext中组件举几个简单的例子做说明。注意：文章内容有些摘自本人学习过程中看到的资料。
Ext2.0对框架进行了非常大的重构，其中最重要的是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext控件。Ext组件由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。
Ext组件体系由下图所示：

组件大致可分成三大类，即基本组件、工具栏组件、表单元素组件。
      基本组件有



这么多的组件，可都是非常酷的。组件使用可以直接通过关键字new 来创建，比如上篇文章中说到的创建一个Window框
var win=new Ext.Window();
除了这种创建方式，一般都会在构造函数中加一些配置属性来初始化组件。比如创建一个面板：
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/ext-base.js" type="text/javascript"></script>
<script src="extjs/ext-all.js" type="text/javascript"></script>
<script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>
<script language="javascript">
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一个面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
</script>
</head>
<body>
<input type="button" onclick="panel()" value="显示面板">
<hr/>
<div id="panel"></div>
</body>
</html>
关键代码：
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一个面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
params是设置Panle的参数，title:标题，width:宽度,height：高度,html:面板显示的内容
var panel=new Ext.Panel(params); 这句代码创建了一个面板，并在构造函数中设置了面板属性。
panel.render("panel"); 表示页面上的div元素id.、
代码可以简写为：


代码如下:

var panel=new Ext.Panel({renderTo:"panel",title:"Hello",width:300,height:200,html:"<h1>一个面板</h1>"});


对于组件中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过父容器的items传递数组方式实现。

function panel(){
var params={
title:"Hello",
width:300,
height:200,
html:"<h1>一个面板</h1>",
items:[
new Ext.Panel({title:"Panel1",height:100}),
new Ext.Panel({title:"Panel2",height:100})
]
};
var panel=new Ext.Panel(params);
panel.render("panel");
}

如果需要让组件显示出不同的效果，我们就需要通过构造函数中的参数设置。
      由于组件都继承自Ext.Component,因此所有组件可能有共同的属性，如下图

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • js实现通用的微信分享组件示例

    一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码 代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • JS组件Bootstrap实现弹出框和提示框效果代码

    JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • JS组件系列之使用HTML标签的data属性初始化JS组件

    JS组件系列之使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心.于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽.我们先来看看bootstrap table的

  • Js组件的一些写法

    今天看了rank的一篇javascript脚本控件topic,突然想总结一下一些写JS组件的方法,或者说一些不同人的不同coding style. 首先看下Prototype里的写法: 复制代码 代码如下: var Class = { create: function() { return function() { this.init.apply(this, arguments); } } } var A = Class.create(); A.prototype = { init: funct

  • JS组件Bootstrap Table使用方法详解

    JS组件Bootstrap Table使用方法详解

    最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

  • 解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

    解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

    Extjs的Panel和Window等组件在默认情况下是带边框的,通常情况下,单独使用没有什么关系,但是将Panel作为Window组件的子组件时就会出现双重边框的现象,如果Window组件中含有两个或者两个以上的Panel,那么Panel和Panel组件之间的边框会重复累加,也就是说会变成双重边框.实际上双重边框并不是很影响外观,但多少看上去会有些不太令人满意,因此我们就得想办法将两重边框去掉,变成单边框.下面是前后两张对比图,大家仔细观察一下两个window的边框部分,可以发现前者较粗,后者

  • JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解

    在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部

  • jquery滚动组件(vticker.js)实现页面动态数据的滚动效果

    复制代码 代码如下: <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script> <script language="javascript" src="lirms/Test/vticker.js"></script> <script type="text/javascript&q

  • JS表格组件神器bootstrap table详解（基础版）

    JS表格组件神器bootstrap table详解（基础版）

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

随机推荐