ExtJS学习笔记
来源：互联网 发布：空军飞行员知乎 编辑：程序博客网 时间：2024/06/03 17:56
必杀技 -> Ext.MessageBox.alert("hello","Hello,easyjf open source");
1. window控件
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello"> </div>
2. render 方法后面的参数表示页面上的div 元素id，也可以直接在参数中通过renderTo 参
数来省略手动谳用render 方法，只需要在构造函数的参数中添加一个renderTo 属性即可，
3. tab panel
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
4. 配置一个面板：
new Ext.Panel({
title:"面板",
html"面板内容",
height:100}
);
再比如创建一个按钮：
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
再比如创建一个Viewport 及其中的内容：
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板内容",
height:100},
{region:"center",
xtype:"grid",
title:"学生信息管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});
5. 事件处理
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
6. addLinster 方法的另外一个简写形式是on
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
由于在调用addListener 的时候传递指定的delay 为2000，因此当用户点击按钮的时候，
不会马上执行事件响应函数，而是在2000 毫秒，也就是两秒后才会弹出提示信息框。
7. 面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
8.工具栏
面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext 中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},//导致添加与保存右对齐
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
],
tools:[
{id:"save"},
{
id:"help",
handler:function(){
Ext.Msg.alert('help','please help me!');
}
},
{id:"close"}
],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
9. ViewPort
VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。
不需要renderTo这样的配置项，直接显示到body区域
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:
[
{title:"面板",
region:"north",
height:50,
html:"<h1>网站后台管理系统!</h1>"
},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center",
items:[{title:"面板1",html:"tab1"},
{title:"面板2",html:"tab2"}]
}
]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
10. 窗口
<script type="text/javascript">
var i=0;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新窗口" />
</body>
11. 窗口分组操作
窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义，该类包括bringToFront、getActive、hideAll、sendToBack 等方法用来对分组中的窗口进行操作。
<script type="text/javascript">
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}
function hideAll()
{
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐藏所有" />
</body>
12. 对话框
Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下面的代码：
alert对话框
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");//Ext.Msg.alert("请注意","这是ExtJS的提示框");
});
});
</script>
</head>
<body>
<input id="btnAlert" type="button" value="alert框" />
</body>
13. 确认对话框，并提示点了什么
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","真的点啦？", function(button,text){
if(button=='yes')
{
Ext.Msg.alert("好吧，你还真点了....");
}
else
{
Ext.Msg.alert("还好没点Yes");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你点点看" />
</body>
13. prompt，输入框，根据选择，弹出内容
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("吐槽吧","你想吐槽点什么？", function(button,text){
if(button=='ok')
{
Ext.Msg.alert("你说的是："+text);
}
else
{
Ext.Msg.alert("耍我呢，你点的是cancel！");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你点点看" />
</body>
14. 自定义保存询问
<script type="text/javascript">
function save(button)
{
if(button=="yes")
{
//执行数据保存操作
Ext.Msg.alert("已保存");
} else if(button=="no")
{
//不保存数据
Ext.Msg.alert("你点击了不保存");
} else
{
//取消当前操作
Ext.Msg.alert("操作已取消");
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你点点看" />
</body>
15. 基本表格GridPanel
ExtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel 定义，继承自Panel，其xtype 为grid。ExtJS 中，表格Grid必须包含列定义信息， 并指定表格的数据存储器Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
<script type="text/javascript">
function showUrl()
{
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
{header:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage",renderer:showUrl}],
cm:colM,
store:store,
autoExpandColumn:2
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
上面的代码中，第一行“var data=…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行“var store=…”用来创建一个数据存储，这是GridPanel 需要使用配置属性，数据存储器Store 负责把各种各样的数据（如二维数组、JSon 对象数组、xml 文本）等转换成ExtJS的数据记录集Record，关于数据存储器Store 我们将在下一章中作专门介绍。第三行“var grid= new Ext.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns 配置属性来描述，columns 是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等，在上面的列子中只用到了header 及dataIndex。
16. Ext.Viewport
一个表示程序可视区域的特殊容器（浏览器可视区域）。
A specialized container representing the viewable application area (the browser viewport).
视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优势非常明显。
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.
Viewport不支持滚动，所以如果子面板需要滚动支持可以使用autoScroll配置。
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.
展示一个经典的border布局的viewport程序示例:
Example showing a classic application border layout :
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
17. 表单案例
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//设置标签对齐方式
labelAlign: 'right',
//设置标签宽
labelWidth: 170,
//设置按钮的对齐方式
buttonAlign:'center',
//默认元素属性设置
defaults:{
width:180
},
items: [{
fieldLabel: '文本框控件',
name: 'TextBox',
xtype: 'textfield'
//,readOnly : true //只读
//,emptyText :'请输入数据' //为空时显示的文本，注意不是value
},{
fieldLabel: '只允许输入数字'
,name:'TextBoxNumber'
,xtype:'numberfield'
//,allowDecimals: false // 允许小数点
//,allowNegative: false, // 允许负数
//,maxValue:1000 //最大值
//,minValue:0 //最小值
},{
fieldLabel: '下拉框控件',
name: 'DropDownList',
xtype: 'combo',
//本地数据源 local/remote
mode:'local',
//设置为选项的text的字段
displayField: "Name",
//设置为选项的value的字段
valueField: "Id",
//是否可以输入，还是只能选择下拉框中的选项
editable : false,
typeAhead: true,
//必须选择一项
//forceSelection: true,
//输入部分选项内容匹配的时候显示所有的选项
triggerAction: 'all',
//selectOnFocus:true,
//数据
store:new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [ [1,'男'],[0,'女'] ]
})
}, {
fieldLabel: '日历控件',
xtype: 'datefield',
name: 'DateControl',
format: "Y-m-d",
editable : false
//, 默认当前日期
//value:new Date().dateFormat('Y-m-d')
},{
fieldLabel: '单选控件'
,xtype:'radiogroup'
,name:'Radios'
,items:[
{name : 'RadioItems',boxLabel:'选我',inputValue:'1',checked:true},
{name : 'RadioItems',boxLabel:'选我吧',inputValue:'0'}
]
},{
fieldLabel: '复选控件'
,xtype:'checkboxgroup'
,name:'Checkboxs'
//columns属性表示用2行来显示数据
,columns:2
,items:[
{name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},
{name : 'CheckboxItems',boxLabel:'苹果',inputValue:'B'},
{name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'},
{name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'}
]
},{
fieldLabel: '文本域控件'
,xtype:'textarea'
,value:'可以输好多字！'
,height:50
},{
fieldLabel: '时间控件'
,xtype:'timefield'
//格式化输出 默认为 "g:i A"
//"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
,format:'H:i'
//时间间隔(分钟)
,increment: 60
},{
fieldLabel: '标签页'
,xtype:'fieldset'
,title: '标签页'
,autoHeight:true
,items :[{
xtype: 'panel',
title: '标签页中的面板',
frame: true,
height: 50
}]
},{
fieldLabel: '在线编辑器'
,xtype:'htmleditor'
,width:260
,height:100
//以下为默认选项，其他请参照源代码
//,enableColors: false
//,enableFormat : true
//,enableFontSize : true
//,enableAlignments : true
//,enableLists : true
//,enableSourceEdit : true
//,enableLinks : true
//,enableFont : true
}],
buttons: [{
text: "保 存"
,handler:function(){
MsgInfo('保存');
}
}, {
text: "取 消"
,handler:function(){
form1.form.reset();
}
}]
});
function MsgInfo(str_msg)
{
Ext.MessageBox.show({
title: '提示',
msg: str_msg,
width: 400,
icon:Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
});
}
});
1. window控件
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello"> </div>
2. render 方法后面的参数表示页面上的div 元素id，也可以直接在参数中通过renderTo 参
数来省略手动谳用render 方法，只需要在构造函数的参数中添加一个renderTo 属性即可，
3. tab panel
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
4. 配置一个面板：
new Ext.Panel({
title:"面板",
html"面板内容",
height:100}
);
再比如创建一个按钮：
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
再比如创建一个Viewport 及其中的内容：
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板内容",
height:100},
{region:"center",
xtype:"grid",
title:"学生信息管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});
5. 事件处理
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
6. addLinster 方法的另外一个简写形式是on
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
由于在调用addListener 的时候传递指定的delay 为2000，因此当用户点击按钮的时候，
不会马上执行事件响应函数，而是在2000 毫秒，也就是两秒后才会弹出提示信息框。
7. 面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
8.工具栏
面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext 中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},//导致添加与保存右对齐
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
],
tools:[
{id:"save"},
{
id:"help",
handler:function(){
Ext.Msg.alert('help','please help me!');
}
},
{id:"close"}
],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
9. ViewPort
VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。
不需要renderTo这样的配置项，直接显示到body区域
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:
[
{title:"面板",
region:"north",
height:50,
html:"<h1>网站后台管理系统!</h1>"
},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center",
items:[{title:"面板1",html:"tab1"},
{title:"面板2",html:"tab2"}]
}
]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
10. 窗口
<script type="text/javascript">
var i=0;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新窗口" />
</body>
11. 窗口分组操作
窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义，该类包括bringToFront、getActive、hideAll、sendToBack 等方法用来对分组中的窗口进行操作。
<script type="text/javascript">
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}
function hideAll()
{
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐藏所有" />
</body>
12. 对话框
Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下面的代码：
alert对话框
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");//Ext.Msg.alert("请注意","这是ExtJS的提示框");
});
});
</script>
</head>
<body>
<input id="btnAlert" type="button" value="alert框" />
</body>
13. 确认对话框，并提示点了什么
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","真的点啦？", function(button,text){
if(button=='yes')
{
Ext.Msg.alert("好吧，你还真点了....");
}
else
{
Ext.Msg.alert("还好没点Yes");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你点点看" />
</body>
13. prompt，输入框，根据选择，弹出内容
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("吐槽吧","你想吐槽点什么？", function(button,text){
if(button=='ok')
{
Ext.Msg.alert("你说的是："+text);
}
else
{
Ext.Msg.alert("耍我呢，你点的是cancel！");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你点点看" />
</body>
14. 自定义保存询问
<script type="text/javascript">
function save(button)
{
if(button=="yes")
{
//执行数据保存操作
Ext.Msg.alert("已保存");
} else if(button=="no")
{
//不保存数据
Ext.Msg.alert("你点击了不保存");
} else
{
//取消当前操作
Ext.Msg.alert("操作已取消");
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你点点看" />
</body>
15. 基本表格GridPanel
ExtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel 定义，继承自Panel，其xtype 为grid。ExtJS 中，表格Grid必须包含列定义信息， 并指定表格的数据存储器Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
<script type="text/javascript">
function showUrl()
{
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
{header:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage",renderer:showUrl}],
cm:colM,
store:store,
autoExpandColumn:2
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
上面的代码中，第一行“var data=…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行“var store=…”用来创建一个数据存储，这是GridPanel 需要使用配置属性，数据存储器Store 负责把各种各样的数据（如二维数组、JSon 对象数组、xml 文本）等转换成ExtJS的数据记录集Record，关于数据存储器Store 我们将在下一章中作专门介绍。第三行“var grid= new Ext.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns 配置属性来描述，columns 是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等，在上面的列子中只用到了header 及dataIndex。
16. Ext.Viewport
一个表示程序可视区域的特殊容器（浏览器可视区域）。
A specialized container representing the viewable application area (the browser viewport).
视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优势非常明显。
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.
Viewport不支持滚动，所以如果子面板需要滚动支持可以使用autoScroll配置。
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.
展示一个经典的border布局的viewport程序示例:
Example showing a classic application border layout :
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
17. 表单案例
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//设置标签对齐方式
labelAlign: 'right',
//设置标签宽
labelWidth: 170,
//设置按钮的对齐方式
buttonAlign:'center',
//默认元素属性设置
defaults:{
width:180
},
items: [{
fieldLabel: '文本框控件',
name: 'TextBox',
xtype: 'textfield'
//,readOnly : true //只读
//,emptyText :'请输入数据' //为空时显示的文本，注意不是value
},{
fieldLabel: '只允许输入数字'
,name:'TextBoxNumber'
,xtype:'numberfield'
//,allowDecimals: false // 允许小数点
//,allowNegative: false, // 允许负数
//,maxValue:1000 //最大值
//,minValue:0 //最小值
},{
fieldLabel: '下拉框控件',
name: 'DropDownList',
xtype: 'combo',
//本地数据源 local/remote
mode:'local',
//设置为选项的text的字段
displayField: "Name",
//设置为选项的value的字段
valueField: "Id",
//是否可以输入，还是只能选择下拉框中的选项
editable : false,
typeAhead: true,
//必须选择一项
//forceSelection: true,
//输入部分选项内容匹配的时候显示所有的选项
triggerAction: 'all',
//selectOnFocus:true,
//数据
store:new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [ [1,'男'],[0,'女'] ]
})
}, {
fieldLabel: '日历控件',
xtype: 'datefield',
name: 'DateControl',
format: "Y-m-d",
editable : false
//, 默认当前日期
//value:new Date().dateFormat('Y-m-d')
},{
fieldLabel: '单选控件'
,xtype:'radiogroup'
,name:'Radios'
,items:[
{name : 'RadioItems',boxLabel:'选我',inputValue:'1',checked:true},
{name : 'RadioItems',boxLabel:'选我吧',inputValue:'0'}
]
},{
fieldLabel: '复选控件'
,xtype:'checkboxgroup'
,name:'Checkboxs'
//columns属性表示用2行来显示数据
,columns:2
,items:[
{name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},
{name : 'CheckboxItems',boxLabel:'苹果',inputValue:'B'},
{name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'},
{name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'}
]
},{
fieldLabel: '文本域控件'
,xtype:'textarea'
,value:'可以输好多字！'
,height:50
},{
fieldLabel: '时间控件'
,xtype:'timefield'
//格式化输出 默认为 "g:i A"
//"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
,format:'H:i'
//时间间隔(分钟)
,increment: 60
},{
fieldLabel: '标签页'
,xtype:'fieldset'
,title: '标签页'
,autoHeight:true
,items :[{
xtype: 'panel',
title: '标签页中的面板',
frame: true,
height: 50
}]
},{
fieldLabel: '在线编辑器'
,xtype:'htmleditor'
,width:260
,height:100
//以下为默认选项，其他请参照源代码
//,enableColors: false
//,enableFormat : true
//,enableFontSize : true
//,enableAlignments : true
//,enableLists : true
//,enableSourceEdit : true
//,enableLinks : true
//,enableFont : true
}],
buttons: [{
text: "保 存"
,handler:function(){
MsgInfo('保存');
}
}, {
text: "取 消"
,handler:function(){
form1.form.reset();
}
}]
});
function MsgInfo(str_msg)
{
Ext.MessageBox.show({
title: '提示',
msg: str_msg,
width: 400,
icon:Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
});
}
});
- eXTJS学习笔记
- extJs 2.0学习笔记
- extjs学习笔记--- 实战
- ExtJs组件学习笔记
- extjs学习笔记
- ExtJS 学习笔记
- extjs 学习笔记
- 《extjs 学习笔记一》
- extjs学习笔记
- extjs学习笔记续
- ExtJs学习笔记
- ExtJS学习笔记
- ExtJs 学习笔记
- ExtJs 学习笔记
- ExtJs学习笔记
- ExtJs学习笔记
- ExtJs 学习笔记
- ExtJs 学习笔记 窗口
- 非常道
- SVN branch merge
- C# 将新打开的窗体置为最顶层
- c++学习看看
- 从程序员到项目经理（14）：项目经理必须懂一点“章法”
- ExtJS学习笔记
- ASP中实现分页显示的七种武器
- JavaScript parseInt() 函数 eval函数及计算器加运算
- Android：Layout_weight的深刻理解，个人首发，欢迎转载和顶贴！
- 略谈各国企业的差异
- 服务器设计系列：状态机
- UVA 12009 - Avaricious Maryanna
- hdu1160--最长有序子序列
- 在怀疑的时代依然需要信仰
