从学校毕业了走向了工作岗位，来到了公司，公司用的前台页面框架是ExtJs，于是作为一个从JSP转向ExtJs的程序员记录下自己学习ExtJs的具体过程。
刚接触ExtJs，首先看的是ExtJs的API文档，映入眼帘的是很多组件，以及各组件所对应的属性以及方法等。
ExtJs的官方下载地址是：http://www.sencha.com/products/extjs/
ExtJs是一个与后台开发语言无关的前台显示界面，是Ajax框架。
ExtJs提供了很多丰富的组件，如多选框，默认的按照列来排列，列显示的设定等等，页面显示也是很漂亮的。
首先接触的是ExtJs中的组件，比如：Ext.panel.Panel,Ext.form.Panel,Ext.grid.Panel
其中Ext.panel.Panel是一个容器，是一个具有特定功能和结构的组件，它继承了Ext.container.Container，可以使用layout来布局，默认的布局方式是一个一个的添加到panel中来。
Ext.form.Panel 是存放表单的组件
Ext.grid.Panel是用来存放grid的组件，grid是类似于表格的组件，用来显示信息，相比于表格，它提供了很多表格没有的功能，比如，隐藏列，默认情况下的排序等等。
个人理解：针对以上三种panel，采用的都是第二个是所对应的组件的名称，而后面的Panel是用来存放Panel前面组件的容器（个人理解）。
下面看一个实例，具体阐述上面三个组件的具体用法，首先看Ext.panel.Panel组件：
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody()
});
这是一个最简单的Ext.panel.Panel,，定义了Panel的名称，宽度以及panel中显示的内容，renderTo:Ext.getBody()的含义是当页面条用<body>的时候会加载这个create的panel。
var filterPanel = Ext.create('Ext.panel.Panel',{
bodyPadding:5,
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
renderTo: Ext.getBody()
});
这是一个将时间组件放入Panel的实例，将定义的组件放到items数组中，其中数组中的每一个数据时用大括号来包含的，xtype是指所定义的子组件的类型，fieldLabel类似于html页面的label标签，bodyPadding是为了避免Panel中定义的这些日期组件会紧邻边框。
考虑到Ext.panel.Panel中的布局类似于流布局，没有特定的样式，UI看起来会比较丑，引入了layout属性，其中常用的layout有以下几种：
1.absolute子元素相对于父元素的绝对定位。定义x,y属性来对panel中组件的绝对定位。
2. accordion 属于折叠式的布局
3. border和java中的border布局一样，分North，sourth,east，west,center等
4. card 在Panel中像卡片一样切换每一个子元素，而每一个子元素都填充整个Panel
5.fit 这种布局情况下Panel中只有一个子项，并且填满整个panel
6.table 表格布局方式，在做报表显示的时候常用
7.vbox 把所有的元素纵向排成一列
8.hbox 把所有的元素横向排成一列
9.anchor 这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。
（具体实例的应用详见：http://www.cnblogs.com/lipan/archive/2011/12/27/2302719.html）
Ext.form.Panel功能的阐述：
Formpanel是一个标准的表单容器，主要是用于表单的部分操作。
下面是一个从API上贴出来的最简单的form示例：
Ext.create('Ext.form.Panel',{
title: 'Simple Form',
bodyPadding: 5, //子组件靠近边框的距离
width: 350,
// 将会通过 AJAX 请求提交到此URL
url: 'save-form.php',
// 表单域 Fields 将被竖直排列, 占满整个宽度
layout: 'anchor', //form的布局方式
defaults: {
anchor: '100%'
},
defaultType: 'textfield', //后面用到的全部是textfield
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// 重置和保存按钮.
buttons: [{
text: '重置',
//绑定组件的动作
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
disabled: true,
handler: function() {
var form =this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form,action) {
Ext.Msg.alert('保存成功', action.result.msg);
},
failure: function(form,action) {
Ext.Msg.alert('操作失败', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
这是一个简单的信息保存的页面。
Ext.grid.Panel
Grid是显示大量数据的极佳方式，本质上是表格，但是是表格的进化。
Gird包括两部分，一个部分是store部分和渲染部分。
API上简单的示例：
Ext.create('Ext.data.Store',{
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer',"email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge',"email":"marge@simpsons.com","phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel',{
title: 'Simpsons',
store:Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email',flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Store是用来存储数据的，在grid中加载已经定义的stroe，store中的数据会填充到grid中的columns中来。
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
