ExtJS4.2入门教程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
话不多说，进入正题，至于有的人想了解ext的优势神马的，自己百度去吧！
一、exit的配置。（注意：本文讲解的是Ext js4.2.1，不同版本部署的js包名有微小差别）
因为只是简单学习，方便新手入门，咱们只引入3个基本包。
ext-all.css
ext-all.js
Ext.Base.js
怎么引入？
二、示例。
1.helloworld，呵呵，学习程序嘛，咱们都是从helloworld开始的!
效果：
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',''],
[2, 'jfox', 'huihoo',''],
[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({
renderT o: 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
});
});