新建web工程的目录结构如上传的图片
在helloworld.html中引入相关的css和js,引用方式如下:
<linkrel="stylesheet"type="text/css"href="../extjs-4.1.1/resources/css/ext-all.css">
<scripttype="text/javascript"src="../extjs-4.1.1/bootstrap.js"></script>
<script type="text/javascript"src="../extjs-4.1.1/locale/ext-lang-zh_CN.js"></script>
然后在浏览器中输入以下地址:
http://localhost:8888/strut2Demo/html/helloworld.html
相应的运行界面如上传图片
Extjs相关术语介绍:
面板Panel:通俗的来讲就是画布,与普通的swing应用程序中的面板概念类似。
布局Layout:组件在容器中的摆放方式。
组件Component:已经预先实现好特定功能,并且在编程中能够重用的代码片段或资源。
渲染Render:含有Extjs的页面在浏览器下载完成后在浏览器中完全展现出来的过程。
窗口Window:本质就是一个层利用css进行格式化,类似windows窗口。
对话框Dialog:普通、选择、输入、自定义等类型的对话框。
3.Extjs在Myeclipse中的插件spket插件的安装:
(1)在http://www.spket.com网站中download中下载spket-1.6.23.zip。
(2)下载完成后,解压缩该文件并将features和plugins中的文件拷到myeclipse的对应目录下,重新启动myeclipse。
4.常用的几种提示窗口的用法配置:‘
Ext.MessageBox.alert(title,msg,[callbackfunction],[scope]);
说明:title弹出窗口的标题
msg:弹出窗口显示的内容,可以使用html标签进行格式化
callbackfunction:回调函数,点击确定按钮后的处理 scope:回调函数作用域
示例程序:
Ext.Msg.alert('提示','<font color=red style=font-weight:bold>Ex.MessageBox.alert</font>',callBack);
functioncallBack(){
Ext.Msg.alert('回调函数','已经执行回调函数');
}
Ext.MessageBox.confirm(title,msg,[callbackfunction],[scope]);
说明:title弹出窗口的标题
msg:弹出窗口显示的内容,可以使用html标签进行格式化
callbackfunction:回调函数,点击确定按钮后的处理 scope:回调函数作用域
示例程序:
Ext.MessageBox.confirm('提示','<font color=red style=font-weight:bold>Ex.MessageBox.confirm</font>',callBack);
function callBack(id){
Ext.Msg.alert('<div align=center>单击的按钮Id是'+id+'</div>');
}
Ext.MessageBox.prompt(title,msg,[callbackfunction],[scope],[boolean/number multiline],[String value]);
说明:title弹出窗口的标题
msg:弹出窗口显示的内容,可以使用html标签进行格式化
callbackfunction:回调函数,点击确定按钮后的处理 scope:回调函数作用域
boolean/number multiline:设置为单行或多行
String value:设置默认值
示例程序:
Ext.MessageBox.prompt('提示','<font color=red style=font-weight:bold>Ex.MessageBox.prompt</font>',callBack,this,true,'默认值');
functioncallBack(id,msg){
Ext.Msg.alert('<div align=center>单击的按钮Id是'+id+'<br>'+'内容是'+msg+'</div>');
}
Ext.MessageBox.wait(msg,[title], [config]);
说明:msg:显示的信息内容
title:提示框的标题
config:配置进度条
示例程序:
Ext.MessageBox.wait('<font color=red style=font-weight:bold>请等待,操作需要很长时间</font>','提示',{text:'进度条示例程序'});
Ext.MessageBox.show():可以定制自己喜欢的弹出窗口的样式
5.Panel面板控件元素的用法:
var obj={title:"hello",width:1024,height:768,html:'hello'};
var panel=new Ext.Panel(obj);
panel.render("hello");
panel.render()函数里面的参数是指页面中div的id。
TabPanel面板控件元素的用法:
var panel=new Ext.TabPanel({width:600,height:400,items:[{title:'面板1',height:30,html:'No1'},{title:'面板2',height:30,html:'No2'},{title:'面板3',height:30,html:'No3'}]});
panel.render('hello');
其中html:’’指面板中的内容
6.对控件添加事件监听响应函数:
Ext.onReady(function (){
var win=new Ext.Window({
title:'不能关闭的窗口',
height:200,
width:300
});
win.on("beforedestroy",
function(obj){
alert('想关闭我是不可能的');
obj.show();
return false;
}
);
win.show();
}
);
当然,也可以在对控件进行配置的时候添加事件监听函数:
function b(){
alert("hcn");
}
Ext.onReady(function (){
new Ext.Panel({
renderTo:'hello',
title:'面板头部header',
width:1000,
height:500,
tools:[{id:'help',handler:a}],
html:'<h3>面板主区域</h3>',
tbar:[{text:'顶端工具栏1',listeners:{"click":b}},{text:'顶端工具栏2',listeners:{"click":b}}],
bbar:[{text:'底端工具栏1',listeners:{"click":b}},{text:'底端工具栏2',listeners:{"click":b}}],
buttons:[{text:'按钮位于foot',listeners:{"click":b}}]
}
);
}
);
运行效果:
点击任何一个按钮都会弹出如下界面:
7.布局layout
Extjs的容器组件包含一个layout和layoutConfig属性,这两个属性用来设置容器的布局和布局的详细配置信息。
Border区域布局:
east\west\south\north\center
Column列布局:
Fit布局:
Form布局:
Accordion布局:
点击+/-可以使用动画,属性layoutConfig{animate:true}即可设置动画属性。
Table布局:
rowspan colspan