ExtJS4.2入门教程.doc

话不多说，进入正题，至于有的人想了解ext的优势神马的，自己百度去吧！

一、exit的配置。（注意：本文讲解的是Ext js4.2.1，不同版本部署的js包名有微小差别）

因为只是简单学习，方便新手入门，咱们只引入3个基本包。

ext-all.css
ext-all.js
Ext.Base.js

怎么引入？

<linkrel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/Ext.Base.js"></script>

二、示例。
1. helloworld，呵呵，学习程序嘛，咱们都是从helloworld开始的!
<script>
Ext.onReady(function(){
Ext.MessageBox.alert("hello","helloWord");
});
</script>
效果：

2. 创建一个面板
Ext.onReady(function(){
//创建一个面板
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'哈哈哈',
width:300,
height:300,
html:'test面板'
});
});

效果：

3.创建一个tabpanel
var panel = new Ext.TabPanel({
renderTo:Ext.getBody(),
width:300,
height:200,
activeTab:0,
items:[new Ext.Panel({
title:"面板1",
height:30,
html:'面板1内容！'
}),new Ext.Panel({
title:"面板2",
height:30,
html:'面板2内容！'
}),new Ext.Panel({
title:"面板3",
height:30,
html:'面板3内容！'
})]
});
});
效果：

3. 创建面板工具栏
new Ext.Panel({
renderTo:Ext.getBody(),
title:"GO,GO,GO,上去就是干！",
width:300,
height:200,
html:'上去就是干！',
tbar:[{
text:'顶部工具栏'
}],
bbar:[{
text:'底部工具栏'
}],
buttons:[{
text:'工具栏位于footer'
}]
});
});
效果：

4. 创建左右布局的面板
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
width:300,
height:200,
layout:"column",
items:[
{columnWidth:0.5,
title:'面板1',
html:'面板1的内容！',
},{
columnWidth:0.5,
title:'面板2',
html:'面板2的内容！',
}
]
});
});
效果：

5. 创建表格布局
Ext.onReady(function(){
var data=[
[1, 'EasyJWeb', 'EasyJF','www.EasyJF.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon',''],
[4, 'springside', 'springside','']
];
var store=new Ext.data.SimpleStore({
data: data,
fields: ["id","name","organization","homepage"]
});
var grid =new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
title:"中国Java社区",
height:200,
width:400,
columns:[
{header:"编号", dataIndex:"id"},
{header:"项目名称", dataIndex:"name"},
{header:"开发团队", dataIndex:"organization"},
{header:"网址", dataIndex:"homepage"}
],
store:store,
autoExpandColumn: 2
});
});
效果：