项目中使用到 EXT 3.3/3.4 做开发(09年的项目)
下载 Ext 3.3所需的 资料
目录
1 面板的创建
显示一个panel
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="ext-3.3.0/resources/css/ext-all.css" />
<script language="javascript" src="ext-3.3.0/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext-3.3.0/ext-all.js"></script>
<script language="javascript" src="ext-3.3.0/src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1>面板主区域</h1>",
tbar: [{
text: "顶部工具栏topToolbar"
}],
bbar: [{
text: "底部工具栏bottomToolbar"
}],
buttons: [{
text: "按钮位于footer"
}]
});
});
</script>
</body>
</html> 可以显示一个简单的panel
panel分为5个部分:
顶部工具栏 (tbar),底部工具栏(bbar),面板头部(header),面板底部(bottom),面板主区域(body)
其中: height / width 定义panel显示的宽高
title 是panel的标题
html 是panel中显示的内容
renderTo 确定panel显示的位置
一般把所有的工具栏和面板上的按钮放到一起
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: div2,
html: "<h1>面板主区域</h1>",
tbar: [{
text: "顶部工具栏"
},{
text: "底部工具栏"
},{
text: "刷新"
}
],
buttons: [{
text: "按钮位于footer"
}]
});
面板Panel主要有下面几个特点：
1）、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包含了特定的样式信息；
2）、面板Panel继承自Container类，因此，面板是一个可视化容器组件；也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类；
3）、面板中即可包括其它元素组件，也可以包含特定html代码片段，可以在程序中动态更新面板中的内容；
4）、面板由固定的5个部分组成，除了body部份以外，其它部分都不是必须的。
如果要在面板中放置Ext组件或控件元素，则可以通过面板的items属性来指定，这个属性的值可以是一个数组，表示面板中有很多子元素，也可以是一个对象，表示面板中只定义一个子元素。当面板对象创建以后，可以通过面板容器的add、insert来动态往面板中增加子元素，用remove方法来在面板动态删除子元素。
2 viewPort 的创建
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout :'fit',
items: [{
title: "viewPort",
html : 'Viewport html',
tbar: [{
text: "按钮1"
},{
text: "按钮2"
}
]
}],
});
});
</script>效果:
Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。他有三个特点：
1）、创建即可使用。不需要渲染，当组件在创建时会自动渲染到document.body节点。
2）、不能使用程序改变该控件的大小，也没有滚动条。
3）、只是作为容器组件，没有额外的属性、方法及事件
Layout制定页面的布局方式
Fit：
在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。
border：
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。
north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
参数 split:true 可以调整除了center四个区域的大小。
参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。
center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。
一般Viewport 用来做主页面
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll: true,
layout :'border',
items: [{
title: "NORTH",
region : 'north',
height : 50,
html : '标题',
},{
title: "WEST",
region : 'west',
height : 200,
html : '左侧导航栏',
collapsible:true,
},{
xtype :'tabpanel',
region : 'center',
items : [
{
title : "center1"
},{
title : "panel2"
} ]
} ],
});
});
</script>效果图:
3 对话框,弹出框
Ext对对话框进行了进一步的优化,
<script type="text/javascript">
function dalert(){
alert("弹出框");
}
function dconfirm(){
var con = confirm("是否确定")
alert("选择结果:" + (con?"是":"否"))
}
function dprompt(){
var prop =prompt("请输入");
alert("你输入的是: " + prop)
}
function alertExt(){
Ext.MessageBox.alert("ext 弹出框")
}
function confirmExt(){
Ext.Msg.confirm("选择确认","是否选择?",function(mess){
Ext.MessageBox.alert("选择结果 :" +(mess == "yes" ? "是" : "否"))
})
}
function promptExt() {
Ext.MessageBox.prompt("姓名输入","请输入你的姓名:" ,function (mess,text){
if(mess == "ok"){
Ext.MessageBox.alert("你输入的是 :" +text)
}else{
Ext.MessageBox.alert("你放弃了输入")
}
})
}
</script>
<input type="button" onClick="dalert();" value ='弹出框' >
<input type="button" onClick="dconfirm();" value ='确认框' >
<input type="button" onClick="dprompt();" value ='输入框'>
<input type="button" onClick="alertExt();" value ='EXT 弹出框'>
<input type="button" onClick="confirmExt();" value ='EXT 确认框'>
<input type="button" onClick="promptExt();" value ='EXT 输入框'>
Ext 对话框一般包含四个参数:
( String title, String msg, [Function fn], [Object scope] )
其中title 为标题, msg 为提示信息,属于必填项
function 是回调函数, scope 是作用于 属于可选项
EXT 对话框效果 : 只在网页中信显示一个很小的弹出框,增加灰色遮罩
建立更好看的对话框
进度条
function waitd(){
var waitbox=Ext.Msg.wait("正在保存数据，请稍候。。。","友情提示"); //显示等待对话框
waitbox.hide.defer(5000, waitbox); //隐藏对话框
}效果
滚动条:
var i=0;
function progress(){
i=0;
var msgbx = Ext.Msg.progress("请等待","加载页面","数据加载中,请稍候...") //显示等待对话框
updatep();
}
function updatep (){
i+=0.1;
Ext.Msg.updateProgress(i);
if(i>1){
Ext.Msg.hide();
}else{
updatep.defer(1000);
}
}
使用show( ) 调用对话框
function save(){
Ext.Msg.show({
title : "保存数据",
msg :'是否保存?',
buttons : Ext.Msg.YESNOCANCEL,
fn : callback,
icon :Ext.MessageBox.QUESTION
});
function callback (btn,text){
if(btn == 'yes'){
alert ("保存完成")
}else if(btn =='no'){
alert ("没有保存")
}else{
alert("取消操作")
}
}
}
4 选项板 (tabpanel)
<script language="javascript">
Ext.onReady(function(){
new Ext.TabPanel({
renderTo : 'div1',
width: 300, //当前tab的宽度
height:400, //当前tab的高度
enableTabScroll:true, //当tab较多时,会自动出现箭头隐藏之前的tab
activeTab: 0, //默认选择第一个tab
items: [
{title:"面板一", html:"嵌套面板一"},
{title:"面板二", //tab的名称
html:"嵌套面板二", //tab的内容
closable:'true' //tab名称的右上角增加删除按钮,点击可删除当前tab
},
{title:"面板三", html:"嵌套面板三", closable:'true'}
]
});
});
</script>效果
也可以直接把html中的标签替换成TabPanel
<div id='test'>
<div class='x-tab' title='div1' >1 </div>
<div class='x-tab' title='div2'>2 </div>
<div title='div3'>
3
<div class='x-tab' title='div4'>4</div>
</div>
</div>
<script language="javascript">
Ext.onReady(function(){
new Ext.TabPanel({
applyTo : 'test',
activeTab: 0, //默认选择第一个tab
autoTabs : true,
deferredRender : false,
});
});
</script>必须设置 TabPanel 的属性
把autoTabs项设置为true，把deferredRender项设置为false，然后通过applyTo项指定把页面中包含class="x-tab"这种样式的子节点的DOM节点应用于选项板
效果:
由于<div title='div3'> 的class 不是"x-type",所以不会解析成tab, 而<div class='x-tab' title='div4'> 虽然与 div1,div2不在一个节点下,但是仍然会被解析成tab
动态tab
<script language="javascript">
Ext.onReady(function(){
var i=0;
var tabs= new Ext.TabPanel({
renderTo : Ext.getBody(),
width: 300, //当前tab的宽度
height:400, //当前tab的高度
enableTabScroll:true, //当tab较多时,会自动出现箭头隐藏之前的tab
activeTab: 0, //默认选择第一个tab
bbar :[
{
text : 'add',
handler :function (){
tabs.add({
title : "新面板"+i++,
closable :true
});
}
},
{
text : 'insert',
handler :function (){
tabs.insert(0,{
title : "新面板"+i++,
closable :true
});
}
},
{
text : 'delete',
handler :function (){
if(tabs.activeTab.closable) {
tabs.remove(tabs.activeTab)
}
}
},
{
text : '关闭所有',
handler :function (){
tabs.items.each(function(p){
if(p.closable) {
tabs.remove(p)
}
} )
}
}
],
items: [
{title:"面板一", html:"嵌套面板一"},
{title:"面板二", //tab的名称
html:"嵌套面板二", //tab的内容
closable:'true' //tab增加删除按钮
},
{title:"面板三", html:"嵌套面板三", closable:'true'}
]
});
}); 可以动态的增加和删除,但是,删除掉时候,会自动跳到初始的面板中,
5 布局
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等
Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。
Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。
Form布局，容器中的元素包括标题及组件内容两项值。
Fit布局，子元素填充整个容器区域。
Accordion布局，折叠布局
6 表单(formPanel)
formPanel 继承自panel ,在panel的基础上提高与表单相关的各种特性, 固定使用form布局
<script language="javascript">
Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo :Ext.getBody(),
title : '信息录入',
height: 200,
width: 300,
labelWidth : 60,
labelAlign: "right",
frame: true,
defaults : {
xtype : 'textfield',
width :180
},
items: [
{name: "username", fieldLabel: "姓名"},
{name: "password", fieldLabel: "密码", inputType: "password"},
{name: "email", fieldLabel: "电子邮件"},
{xtype: "textarea", name: "intro", fieldLabel: "简介"}
],
buttons:[{text:"提交"}, {text:"取消"}]
});
});
</script>
结果:
其中:
new Ext.form.FormPanel 来创建表单面板, labelWid表单中标签的宽度,labelAlign 指定字段标签的对齐方式
defaults 中指定该容器中所有子元素默认类型都是 textfield(文本框), 在items定义的子元素中, 都包含一个name属性,相当于
input 标签中的name属性, fieldLabel 指定字段标签,
BasicForm
formPanel 包含一个form属性,该属性是一个 Ext.form.BasicForm 类型的对象,可以直接访问,也可以通过 getForm()方法得到.
BasicForm 表示基本的表单,包含了submit ,load,reset等方法,用来代替 html中<form>标签中的submit,reset等方法,通过调用这些方法可以实现表单提交,信息重置等操作;
优化上个示例
buttons:[
{
text:"提交",
handler : function (){
f.form.submit({
waitTtle : '数据提交',
waitMsg : '表单提交中,请稍候...'
});
}
}, {
text:"重置",
handler : function (){
f.form.reset();
}
}]能够模拟表单提交,重置功能
表单元素 Field
field 代表各种各样的数据录入项, 在程序中,一般直接使用 field的子类, 包括Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField等。
field组件一般包括一个fieldLabel属性和一个name属性
表格(GridPanel)
表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。
ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。
表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)
表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。
<script language="javascript">
Ext.onReady(function(){
var data =[
[0,'c语言','C语言程序设计','张老师'],
[1,'c++','c++程序设计','李老师'],
[2,'java','java课程设计','刘老师'],
[3,'操作系统','操作系统入门','吴老师']
];
var store = new Ext.data.SimpleStore({
data : data,
fields : ['id','names','course','teacher']
});
var grid =new Ext.grid.GridPanel({
renderTo : Ext.getBody(),
title : '编程课程' ,
height : 500,
width : 400,
columns :[
{header : '编号',dataIndex : 'id'},
{header : '名称',dataIndex : 'names'},
{header : '课程',dataIndex : 'course'},
{header : '老师',dataIndex : 'teacher'},
],
store : store,
autoExplandColumn : 2
});
})
</script>
效果:
其中: dataIndex 的值要与store中的fields相对应
TreePanel
同步树:
<script language="javascript">
Ext.onReady(function(){
var rootNode= new Ext.tree.TreeNode({
id :"root",
text : "根节点"
});
var childNode =new Ext.tree.TreeNode({
id :"c1",
text : "子节点"
});
rootNode.appendChild(childNode);
var store = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
root : rootNode,
width: 100
});
})
</script>
TreeNode 表示一个树节点,常用属性有:
id , text , icon, checked