ExtJs 控件详解
ExtJs 控件详解
1.Ext.MessageBox.alert()方法 有四个参数，为简单起见，主要介绍前面三个参数：
alert( title , msg , function(){} )
其中 title，msg 为必选参数，function 为可选参数，在关闭弹出窗口后触 发。
Ext.MessageBox.alert("title","msg");
Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹 出！")});
2.Ext.MessageBox.confirm()方法 基本上同 alert()方法一模一样。
注意这点： Ext.MessageBox.confirm("title","msg",function(e){alert(e);});
这个参数 e 是什么？
它是你点击的弹出框的按钮的值，三种值： yes,no,cancel.
Alert()方法也是如此，不过只有两种值：ok，cancel.
3.Ext.MessageBox.prompt()方法 有六个参数，比前面 alert 方法多一个返回值和是否多行。
Ext.MessageBox.prompt("title","msg");
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+t ext);});
// 输入"qianxudetianxia",点击 ok 按钮，弹出 ok-qianxudetianxia
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+t ext);},this,true);
// true 为多行，this 表示作用域
4.Ext.MessageBox.show()方法 功能很则大，采用 config 配置形式，比前面的方法使用更方便。
参数很多，在此列举最常用的配置参数：
1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从 id1 处弹 出并产生动画，收缩则相反
2.buttons:弹出框按钮的设置，
主要有以下几种：
Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CAMCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字：{"ok","我本来是 ok 的"}。 若设为 false，则不显示任何按钮.
3.closable:如果为 false，则不显示右上角的小叉叉，默认为 true。
4.msg:"消息的内容"
5.title:"标题"
6.fn:关闭弹出框后执行的函数
7.icon：弹出框内容前面的图标，
取值为
Ext.MessageBox.INFO，
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:弹出框的宽度，不带单位
9.prompt：设为 true，则弹出框带有输入框
10.multiline：设为 true，则弹出框带有多行输入框
11.progress:设为 true，显示进度条，（但是是死的）
12.progressText:显示在进度条上的字
13.wait：设为 true，动态显示 progress
14.waitConfig:配置参数，以控制显示
progress example:
Ext.MessageBox.show({ title:"标题",
msg:"内容的消息",
buttons:{"ok":"我不再显示 OK 了"},
fn:function(e){
alert(e);
},
animEl:"test1", width:500, icon:Ext.MessageBox.INFO,
closable:false, progress:true,
wait:true, progressText:"进度条" // prompt:true // multiline:true
});
4.Ext.MessageBox.show()中的进度条的使用
首 先 必 须 知 道 例 外 两 个 方 法 Ext.MessageBox.hide()
和 Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参 数，看名字就知道意思)，
注意 value 为 0-1 之间的数，表示进度条的进度.
第一种：（通过进度的大小控制进度，满进度为 1）
Ext.get("btn1").on( "click",
function(){
Ext.MessageBox.show({
title:"df",
msg:"dfd",
progress:true,
width:300,
closable:true
});
var f=function(v){
return function(){
if(v==12) { Ext.MessageBox.hide(); // alert("加载完成！"); } else{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);
} }}
for(var i=1;i<13;i++){
setTimeout(f(i),i*500);//从点击时就开始计时，所以500*i表 示每500ms就执行一次
}
} );
第二种：（通过固定时间控制进度加载）
Ext.get("btn1").on( "click",
function(){
Ext.MessageBox.show(
{ title:"时间进度条",
msg:"5s 后关闭进度框",
progress:true,
width:300,
wait:true,
waitConfig:{interval:600},// 0.6s进度条自动加载一定长度
closable:true
});
setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数
}
最后关于那个 waitConfig 的参数，在此说明下：
1.interval:进度的频率
2.duration：执行进度的持边时间，超过这个时间后，interval 失效，不再产 生进度效果，但进度狂也不会消失。 3.fn:duration 的时间到后执行的函数
所以，上面的通过时间控制进度另外一种写法为:
Ext.get("btn1").on( "click",
function(){
Ext.MessageBox.show(
{ title:"时间进度条",
msg:"5s 后关闭进度框",
progress:true,
width:300,
wait:true,
waitConfig:{
interval:600,
duration:5000,
fn:function(){
Ext.MessageBox.hide();// 让进度条消失
}},
closable:true
});
setTimeout(function(){Ext.MessageBox.hide()},5000);
} );// 效果一样。
(2)--Ext.Panel
<div id="container"> </div>
var p = new Ext.Panel({
title: 'My Panel',//标题
collapsible:true,//右上角上的那个收缩按钮，设为 false 则不显示
renderTo: 'container',//这个 panel 显示在 html 中 id 为 container 的层中
width:400,
height:200, html: "<p>我是内容，我包含的 html 可以被执行"</p>"//panel 主 体中的内容，可以执行 html
});
因为 panel 组件的子类组件包括 TabPanel,GridPanel,FormPanel,TreePanel 组件，所以非常有必要介绍 Panel 组件的配置参数和相关的属性、方法。
配置参数(只列举部分常用参数)
1.autoLoad：有效的 url 字符串，把那个 url 中的body 中的数据加载显示， 但是可能没有样式和 js 控制，只是 html 数据
2.autoScroll:设为 true 则内容溢出的时候产生滚动条，默认为 false
3.autoShow:设为 true 显示设为"x-hidden"的元素，很有必要，默认为 false
4.bbar:底部条，显示在主体内
// 代码：bbar:[{text:'底部工具栏 bottomToolbar'}]
5.tbar:顶部条，显示在主体内，
//代码:tbar:[{text:'顶部工具栏 topToolbar'}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）
// 代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为 right
8.collapsible：设为 true，显示右上角的收缩按钮，默认为 false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10.html:主体的内容
11.id：id 值，通过id可以找到这个组件，建议一般加上这个id 值
12.width：宽度
13.height：高度
13.title:标题
14.titleCollapse： 设为 true，则点击标题栏的任何地方都能收缩，默认为 false.
15.applyTo：（id）呈现在哪个html 元素里面
16.contentEl：（id）呈现哪个 html元素里面，把 el内的内容呈现
17.renderTo：（id）呈现在哪个 html元素里面关于这三个参数的区别(个人认为：applyTo和 RenderTo则调to 到html 元素中，contentEl 则是 html元素到ext 组件中去)：
1.可拖动的panel实例
// 代码
// panel，但是拖动的结果不能保存
var p=new Ext.Panel({title: 'Drag me',
x:100, y:100,
renderTo:Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化 panel的位置
floating: true,//true
frame:true,//圆角边框
width: 400, height: 200,
draggable:true }).show();// 在这里也可以不 show（） 但是还不能拖到其他的地方，我们需要改写 draggable：
draggable: { insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel =this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时 panel 的坐标
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
} }
实现了可保存的拖动
拖动的时候阴影还在原位置，我们再在 draggable 中的 onDrag 事件中添加代 码：
var s = this.panel.getEl().shadow;
if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); } // shadow 的realign方法的四个参数，改变 shadow 的位置大小属性
最后这个可拖动的panel的代码为：
var p=new Ext.Panel({
title: 'Drag me', x: 100, y: 100,
renderTo: Ext.getBody(), floating: true,
frame: true, width: 400, height: 200,
draggable: {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
}
}) //
// 2.带顶部，底部，脚部工具栏的
// panel
// var
// p=new
// Ext.Panel({
// id:"panel1",
// title:"标题",
// collapsible:true,
// renderTo:"container",
// closable:true,
// width:400,
// height:300,
// tbar:[{text:"按钮
// 1"},{text:"按钮
// 2"}],
// //顶部工具栏
// bbar:[{text:"按钮
// 1"},{text:"按钮
// 2"}],
// //底部工具栏
// html:"内容",
// buttons:[{text:"按钮
// 1"},{text:"按钮
// 2"}]
// //footer
// 部工具栏
// });
我们已经在各种工具栏上添加了按钮，但是却没有激发事件，下面我们来添加按 钮事件代码： tbar:[{text:"按钮 1",handler:function(){Ext.MessageBox.alert("我是 按钮 1","我是通过按钮 1 激发出来的弹出框！")}},{text:"按钮 2"}], // 改写
// tbar，添加
// handler
// 句柄，点击顶部工具栏上按钮
// 1，弹出提示框，效
// 果图大家想象下，就不码出来了
// 当然，一般情况下，我们只要一个工具栏，这里只是为了演示！
// 3.panel
// 工具栏
// //添加下面的代码到
// panel
// 配置参数中
// tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:functio
// n(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发
// 了")}}],
// //id
// 控制按钮，handler
// 控制相应的事件
// //id
// 的枚举值为：
// toggle
// (collapsable
// 为
// true
// 时的默认值)
// close
// minimize
// maximize
// restore
// gear
// pin
// unpin
// right
// left
// up
// down
// refresh
// minus
// plus
help search save print
(3)--Ext.Window // html 代码 <div id="win" class="x-hidden"> </div> //js 代码 var
// w=new Ext.Window({ contentEl:"win",//主体显 示的 html 元素，也可以写为
// el:"win" width:300, height:200, title:"标 题 " }); w.show();
参数介绍 ： 因为 前面已经 介绍 了 panel 组 件，下面只介绍 window 组 件的几个其他特别 的 配置参数 // 几个前面没有介绍 的
// window
// 自己的配置参数
// 1.closeAction:枚举
// 值 为 ：close(默认
// 值 )，当点击 关 闭
// 后，关 闭 window
// 窗口 hide,关 闭
// 后，只是 hidden
// 窗口
// 2.closable:true
// 在右上角显 示小叉叉的关
// 闭 按钮 ，默认 为
// true
// 3.constrain：true
// 则 则 制此 window
// 控制在
// viewport，默认 为
// false
// 4.modal:true
// 为
// 模式窗口，后面的内容都不能操作，默认
// 为 false
// 5.plain：
// //true 则
// 主体背景透明， false
// 则 主体有小差别
// 的背景色， 认 为
// false 默 //需要显
// 示下
// show（）方法,默认
// 的窗口是可拖动 的，可关
// 闭 的，可拖动 大小的
// w.show（）
实 例介绍 ：
1.嵌套了 tabpanel 的 window 嵌套了 var w=new Ext.Window({ contentEl:"win", width:300, height:200, items:new Ext.TabPanel({ activeTab:0,// 当前标
// 签 为
// 第 1
// 个
// tab（从
// 0 开
// 始索引）
// border:false,
// items:[{title:"tab1",html:"tab1
// 在
// windows
// 窗口中
// "},{title:"tab2",html:"tab2
// 在
// windows
// 窗口中"}]//TabPanel
// 中的标
// 签 页
// ，以后再深入讨
// 论
// }),
// plain:true,//true
// 则
// 主体背景透明，false
// 则
// 主体有小差别
// 的背景色，
// 默认 为
// false
// title:"标
// 题 "
// });
// w.show();
我们 通过 items 把 TabPanel 组 件嵌套在 window 的主体中去了。 我们 在添加工具栏 看看 // bbar:[{text:"确定"},{text:"取消
// ",handler:function(){w.close();}}],//bottom
// 部
// buttons:[{text:"确定"},{text:"取消
// ",handler:function(){w.close();}}],//footer
// 部
// buttonAlign:"center",//footer
// 部按钮 排列位置,这 里是中间
// //
// collapsible:true,//右上角的收缩
// 按钮
其他工具栏 方法一样 。 (4)--Ext.FormPanel 之第一式 FormPanel,也是继 承 panel 组 件的使用。 首先弄清楚这 个问 题 ，创 建的时 候： // 查
// 看源代码
// 便知，两种
// 方法是一样
// 的
// Ext.form.FormPanel
// =
// Ext.FormPanel;
// 我们 还
// 是从最简
// 单
// 的代码
// 实 例开
// 始吧：
// <!--html
// 代码
// -->
// <body>
// <div
// id="form1"></div>
// </body>
// //js
// 代码
// var
// form1
// =
// new
// Ext.form.FormPanel({
// width:350,
// frame:true,//圆
// 角和浅蓝
// 色背景
// renderTo:"form1",//呈现
// title:"FormPanel",
// bodyStyle:"padding:5px
// 5px
// 0",
// items:[
// {
// fieldLabel:"UserName",//文本框标
// 题
// xtype:"textfield",//表单
// 文本框
// name:"user",
// id:"user",
// width:200
// }, {
// fieldLabel:"PassWord",
// xtype:"textfield",
// name:"pass",
id:"pass", width:200 } ], buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事 件！");}}] });
都是通过 items 属性参数把表单 元素添加到这 个表单 中。 我们 发 现 两个文本框的类 型和狂度是一样 的，我们 还 可以把 items 里面的相同 项 提取出来，以简 化代码 ： // 简
// 化代码
// ，和上面的代码
// 效果一样
// var
// form1
// =
// new
// Ext.form.FormPanel({
// width:350,
// frame:true,
// renderTo:"form1",
// title:"FormPanel",
// bodyStyle:"padding:5px5px
// 0",
// defaults:{width:200,xtype:"textfield"},//*****简
// 化****//
// items:[
// {
// fieldLabel:"UserName",
// //xtype:"textfield",
// name:"user",
// id:"user",
// //width:200
// }, {
// fieldLabel:"PassWord",
// //xtype:"textfield",
// name:"pass",
// id:"pass",
// inputType:"password",
// //width:200
// } ],
// buttons:[{text:"确定"},{text:"取消
// ",handler:function(){alert();}}]
}); 关 于 inputType,参数如下： // input 的各种 类 型（这 个大家都知道，就只列了几个典型的） radio check text(默认
// ) file password 等等 关 于 FormPanel 的配置参数，请 主要参考 panel
// 的参数，这 里列举 另外两个： 1.labelAlign:fieldlabel 的排列位置，默认 为
// "left"，其他两个枚举 值 是 "center","right"
// 2.labelWidth:fieldlabel 的占位宽 3.method:"get"或"post"
// 4.url："提交的地址" 5.submit:提交函数 //稍后我们 一起详 详 分析 因为
// 内容太多，我们 先看一个例子。 1.FormPanel 的 fieldset 应 用 //把前面代码 重写
// items 属性 items:[ { xtype:'fieldset', title: '个人信息',
// collapsible: true, autoHeight:true, width:330,
// defaults: {width: 150}, defaultType: 'textfield',
// items :[{ fieldLabel: '爱 好', name: 'hobby', value:
// 'www.cnblogs.com' },{ xtype:"combo", name: 'sex',
// store:["男","女","保密"],//数据源为 一数组 fieldLabel:"性别 ",
// emptyText:'请 选 择 性别 .' }] } ]
这 里的 combox 组 件只是简 单 的演示，具体还 是要深入了解，我们 会在以后的 内容中详 详 探讨 。 2.关 于 xtype 的类 型，在 extjs 的 form 表单（其他的请 参考 api）中已经 定 义 的有：
Form components --------------------------------------form Ext.FormPanel checkbox Ext.form.Checkbox combo Ext.form.ComboBox datefield Ext.form.DateField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label Ext.form.Label numberfield Ext.form.NumberField radio Ext.form.Radio textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerField
(5)--Ext.FormPanel 之第二式 之前谈 到了 FormPanel 中的 fieldset 和 ComboBox,下边 继 边 。 .可选 的 fieldset 实 例 主要知识 点： // 因为 为
// 得这
// 个参数特别
// ，特举
// 一例以说
// 明
// 1.checkboxToggle:true//true
// 则 呈现
// 一个带
// checkbox
// 的
// fieldset，选
// 中则 展
// 开
// ，否则
// 相反，默认
// 为
// false
// 2.checkboxName:string//当上面为
// true
// 时
// ，作为
// checkbox
// 的
// name，方便表单
// 操作
这 里我把 js 核心代码 码 出来(html 代码 与上一篇中完全相同，不列出)：
// 在上一节 的基础 代码 的 items 里面添加如下配置 { xtype:"fieldset", checkboxToggle:true,//关 键
// 参数，其他和以前的一样 checkboxName:"dfdf", title:"选 填信息", defaultType:'textfield',
// width:330, autoHeight:true,//使自适应 展开 排版 items:[{ fieldLabel:"UserName",
// name:"user", anchor:"95%"//330px-labelWidth 剩下的宽 度的 95%，留下 5%作为 后面提 到的验 证 错 误
// 提示 }, { fieldLabel:"PassWord", inputType:"password",//密码 文本 name:"pass",
// anchor:"95%" }] }
4.表单 验 证 实 例（空验 证 ，密码 确认 验 证 ，email 验 证 ） 我们 可以用单 独的 js 写表单 验 证 ，但是 extjs 已经 为 我们 想到了（自己单 独写 反而不方便）。 在验 证 之前，我不得不提两个小知识 点： // 大家在很多的
// extjs
// 代码
// 中都看到了这
// 两个，他们
// 都起提示作用的
// Ext.QuickTips.init();//支持
// tips
// 提示
// Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举
// 值 为
// "qtip","title","under","side",id(元素
// id)
// //side
// 方式用的较
// 多，右边
// 出现 现
// 色感叹
// 号，鼠标
// 上去出现
// 错 误
// 提
// 示，其他的我就不介绍
// 了，可自行验
// 证
// //大家可以分别
// 去掉这
// 两行代码
// ，看效果就会明白他们
// 的作用，（放在
// onReady
// 的
// function（）{}中）
1.我们 看一个最简 单 的例子：空验 证 （其实 这 不算是一个专 门 的验 证 例子） 的例子： 例子）
// 空验 证 的两个参数 1.allowBlank:false//false 则 不能为 空，默认 为 true 2.blankText:string//当为
// 空时 的错 误 提示信息 js 代码 为 ： var form1 = new Ext.form.FormPanel({ width:350,
// frame:true, renderTo:"form1", labelWidth:80, title:"FormPanel",
// bodyStyle:"padding:5px 5px 0",
// defaults:{width:150,xtype:"textfield",inputType:"password"}, items:[
// {fieldLabel:"不能为 空", allowBlank:false,//不允许 为 空 blankText:"不能为 空，请 填写",//错 误
// 提示信息，默认 为 This field is required! id:"blanktest", anchor:"90%"
} ] });
2.用 vtype 格式进 行简 单 的验 证 。 2.用
在此举 举 件验 证 的例子，重写上面代码 的 items 配置: items:[ {fieldLabel:"不能为 空", vtype:"email",// email
// 格式验
// 证
// vtypeText:"不是有效的举
// 箱地址",//错
// 误
// 提示信息,默认
// 值
// 我就不说
// 了
// id:"blanktest",
// anchor:"90%"
// }
你可以修改上面的 vtype 为 以下的几种 extjs 的 vtype 默认 支持的验 证 ： // form 验 证 中 vtype 的默认 支持类
// 型 1.alpha //只能输 入字母，无法输
// 入其他（如数字，特殊符号等）
// 2.alphanum//只能输
// 入字母和数字，无法输 入其他
// 3.email//email 验 证
// ，要求的格式是"[email protected]"
// 4.url//url 格式验 证 ，要求的格式是
// http://www.langsin.com
3.确认 密码 验 证 （高级 自定义 验 证 ）
前面的验 证 都是 extjs 已经 提供的验 证 ，我们 也可以自定义 验 证 函数，比上面要 复 杂 点了。我们 一起做一个密码 确认 的例子。 我们 修改前面的代码 ： // 先用
// Ext.apply
// 方法添加自定义
// 的
// password
// 验 证
// 函数
// （也可以取其他的名字）
// Ext.apply(Ext.form.VTypes,{
// password:function(val,field){//val
// 指这
// 里的文本框值
// ，
// field
// 指这
// 个文
// 本框组
// 件，大家要明白这
// 个意思
// if(field.confirmTo){//confirmTo
// 是我们
// 自定义
// 的配置参数，一般用
// 来保存另外的组
// 件的
// id 值
// var
// pwd=Ext.get(field.confirmTo);//取得
// confirmTo
// 的那个
// id
// 的值
// return
// (val==pwd.getValue());
} return true; } }); // 配置 items 参数 items:[{fieldLabel:"密码 ", id:"pass1",
// anchor:"90%" },{ fieldLabel:"确认 密码 ", id:"pass2",
// vtype:"password",//自定义 的验 证 类 型 vtypeText:"两次密码
// 不一致！", confirmTo:"pass1",//要比较 的另外一个的组 件的 id
// anchor:"90%" }
ExtJs2 学习 系列 系列(6)--Ext.FormPanel 之第三式 之第三式(ComboBox 篇) 5.服务器数据作为 ComboBox 的数据源实例 首先从服务器获取 json 数据： // cs
// 后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代
// 码放在类里面，不是放在方法里)
// public
// string
// ServerData="['湖北','江西','安徽']";
// //aspx
// 前台
// js
// 介绍代码
// Ext.onReady(function(){
// var
// combo=new
// Ext.form.ComboBox({
// store:<%=ServerData%>,//获取
// ServerData
// 的
// string
// 值，不
// 要用""引起来，否则就不是
// object
// 数据，而是字符串，这是一个很巧妙的关键
// 点：把服务器的字符串转化为
// js 的
// object
// 数据，是不是超级方便。
// emptyText:'请选择一个省份....',
// applyTo:
// 'combo'
// });
// });
// aspx 前台 html 代码 <input type="text" id="combo" size="20"/>
我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数 据。问题来了，js 和 html 怎么调用 c#后台 的变量和方法？（变量的调用上面刚刚介绍） 6.js 和 html 怎么调用 c#后台的变量和方法 关于这个话题，我不多说，网上很多讲解，在此仅简单说明 1.js 调用 c#后台变量，参考上面，注意，如果想获取 string 类型，请在 js 里 用引号 var str="<%=ServerData%>"(返回"['湖北','江西','安徽']") 2.js 调用 c#后台方法： <!--后台有一个方法： public string ServerData() { return "fdfdfdfdsf"; } 前台代码：--> <input id="Text2" type="text" value="<%=ServerData()%>"/> 3.js 调用 c#后台带参数的方法 <!--public string ServerData(string pram) { return pram+"，我是参数传进来的"; } 主要是处理好 js 的引号问题，多尝试就会正确--> <script>alert('<%=ServerData("谦虚的天下") %>');</script> 好了，现在我们有了 js 获取后台数据的方法手段，不怕不怕啦，不过，这只是 一小步。 7.ComboBox 的数据源 store 格式详解 在前面的例子里面，我们一直给 ComboBox 的数据源 store 赋值一维数组，其 实 store 支持多维和 Store.data.Store 类型。 //下面就几种数据以代码举例说明 1.一维数组：["江西","湖北"]，值同时赋给 ComboBox 的 value 和 text 2.二维和多维数组：[["one","bbar","111"],["two","tbar","222"]],第一维 和第二维分别赋值给 value 和 text，其他维忽略 3.store 类型：包括 GroupingStore, JsonStore, SimpleStore. //我们分三步走： //第一步：提供数据： var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']]; //第二步：导入到 store 中： var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'], data : data }); // 第三步 :把 store 托付给 comboBox 的
// store var combo = new
// Ext.form.ComboBox({ store:
// store,
// displayField:'english',//store
// 字段中你要显示的字段，多字段必选参 数，默认当 mode
// 为 remote 时 displayField 为
// undefine，当 select 列表时
// displayField 为"text" mode:
// 'local',//因为 data
// 已经取数据到本地了，所以'local',默认为
// "remote"，枚举完
// emptyText:'请选择一个省份...',
// applyTo: 'combo' });
这里我们介绍了两个新的参数 displayField 和 mode，请记住，后面不再专门 说明。 8.ComboBox 的 value 获取 添加 listeners 事件： // ComboBox
// 的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，
// select
// 事件就是其中典型的一个
// listeners:{
// "select":function(){
// alert(Ext.get("combo").dom.value);
// //获取
// id 为
// combo
// 的值 }
// }
// //这里我们提供了一种不是很好的方法，在此不做过多停留
9.把 Extjs 的 ComboBox 样式应用到 select 的下拉框中去 核心参数介绍 transform:id// 用于转换样式的，TimeField
// 作为 ComboBox
// 的子类也有此 属性 核心代码：
// //js 代码 var
// ExtSelect=new
// Ext.form.ComboBox({
// transform:"select",//html
// 中的 id
// width:80//宽度 });
// //html 代码 <select
// id="select">
// <option
// value="1">浪曦</option>
// <option
// value="2">博客园</option>
// <option
// value="3">百度</option>
// <option
// value="4">新浪</option>
// </select>
// //是不是超级简单？
从中不是也可以看出 extjs 的不同之处的，不 过不明显！ 10.ComboBox 的其他重要参数 1.valueField:"valuefield"// value
// 值字段
// 2.displayField："field"
// //显示文本字段
// 3.editable：false//false
// 则不可编编，默认为
// true
// 4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下，你选择
// 某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示
// 全部选项
// 5.hiddenName:string
// //真正提交时此
// combo
// 的
// name，请一定要注意
// 6.typeAhead:true,//延时查询，与下面的参数配合
// 7.typeAheadDelay:3000,//默认
// 250
(7)--Ext.FormPanel 之第四式 其他组 件示例篇 之第四式( 件示例篇) 11.checkbox 简 单 示例 效果图 ：
js 代码 ： Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:330, layout:"form", labelWidth:30, title:"checkbox 简 单 示例", labelAlign:"left", renderTo:Ext.getBody(), items:[{ xtype:"panel", layout:"column",// 也可以是
// table,实
// 现
// 多列布局
// fieldLabel:'爱
// 好',
// isFormField:true,//非常重要,否则
// panel
// 默认
// 不显 示
// fieldLabel
// items:[{
// columnWidth:.5,//宽
// 度为
// 50%
// xtype:"checkbox",
// boxLabel:"足球",//显
// 示在复
// 选
// 框右边
// 的文字
// name:""
// },{
// columnWidth:.5,
// xtype:"checkbox",
// boxLabel:"篮
// 球",
// name:""
// }]
// }]
// });
// });
// 关
// 于多列布局，我们
// 可以使用
// column
// 或者
// table
// 布局解决！
// //其他几个参数
// 1.checked：true//true
// 则 选
// 中，默认
// 为
// false
// 2.name:"**"//name
// 值
// 3.value:""//初始化值
// ，默认
// 为
// undefine
// 12.radio
// 简 单
// 示例
// 基本上和
// checkbox
// 一样
// ，不过
// 注意一组
// 单 选
// 框必须
// name
// 值
// 相同，才能单
// 选 。
// 效果图
// ：
代码 ： // 基本同上，不做过 多解释 Ext.onReady(function(){ Ext.QuickTips.init(); var
// myform=new Ext.FormPanel({ frame:true, width:330, layout:"form",
// labelWidth:30, title:"radio 简 单 示例", labelAlign:"left",
// renderTo:Ext.getBody(), items:[{ xtype:"panel", layout:"column",
// fieldLabel:'性别 ', isFormField:true, items:[{ columnWidth:.5,
// xtype:"radio", boxLabel:"男", name:"sex" //inputValue },{
// columnWidth:.5, checked:true, xtype:"radio", boxLabel:"女", name:"sex"
// }] }] }); }); 13.htmleditor 简 单 示例 效果图 ：
js 代码 ： // 基本上同上 Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new
// Ext.FormPanel({ frame:true, width:600, layout:"form", labelWidth:50,
// title:"htmleditor 简 单 示例", labelAlign:"top",//items 中的标 签 的位置
// renderTo:Ext.getBody(), items:[{ xtype:"htmleditor", id:"he",
// fieldLabel:"编 编 器", anchor:"99%" }] }); }); 在这 里我啰 啰 个参数：
// //labelAlign 参数 labelAlign:此参数是指 form 表单 中 items 各项 的 label 位置，默认 值 为
// left，枚举 值 有 left,right,top
// 我看见 过 有朋友认 为 此参数指 title 的位置，是错误 的！ 几个其他的参数： //补 充几个参数 1.hideLabel:true//默认 为
// false，还 适用于有标 签 的所有表单 组 件 //下面的一组 参数控制编 编 器的工具栏 选 项 ,都是默认 值 为 true
// 2.enableColors：true//默认 为 true，显 示字体颜 色，字体背景颜 色
// 3.enableAlignments:true//左，中，右对 齐 4.enableFont：true//字体
// 5.enableFontSize:false//字体大小，就是 A 旁边 有个小箭头 的 6.enableFormat：false//粗体，斜体，下划线
// 7.enableLinks:true//链 接 8.enableLists：true//列表 9.enableSourceEdit：true//源代码 编
// 编 14.datefield 简 单 示例 效果图 ：
js 代码 ： Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:200, layout:"form", labelWidth:30, title:"dateditor 简 单 示例", labelAlign:"left",
renderTo:Ext.getBody(), items:[{ xtype:"datefield", fieldLabel:"生日", anchor:"99%" }] }); }); 15.timefield 简 单 示例 把上面的例子中 datefield 改为 timefield,效果图 ：
示例： 16.numberfield 简 单 示例： 把上面的 datefield 改为 numberfield，就只能输 入数字了 17.triggerfield 简 单 示例 说 明：它提供了一个触发 的事件 onTriggerClick，datefield 和 combox 都是继 承它 效果图 ：(点击 右边 下拉按钮 )
js 代码 ： Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:200, layout:"form", labelWidth:30, title:"triggerfield 简 单 示例", labelAlign:"left", renderTo:Ext.getBody(), items:[{ xtype:"trigger", fieldLabel:"触发 ", anchor:"99%", onTriggerClick:function(e){ // 在这
// 里写你要实
// 现
// 的事件，很容易扩
// 展
// alert("www.langsin.com");
// } }]
// });
// });
(8)--Ext.FormPanel 之第五式 综 合篇 之第五式( 合篇) 先来个简单的例子，以说明 formpanel 如何把数据传给其他页面。 效果图：
现在我们要实现的效果是：点击确定，把值传到另一页面！，如下：
原页面 js 代码为： Ext.onReady(function(){ Ext.QuickTips.init(); var form=new Ext.FormPanel({ frame:true, width:300, // monitorValid:true,//绑定验证
// layout:"form",
// labelWidth:70,
// title:"添加个人信息",
// labelAlign:"left",
// renderTo:Ext.getBody(),
// submit:
// function(){
// this.getEl().dom.action
// =
// 'GetForm.aspx',
// this.getEl().dom.method='POST',
// this.getEl().dom.submit();
// },
// items:[{
// xtype:"textfield",
// fieldLabel:"用户名",
// //id:"UserName",
// allowBlank:false,
// blankText:"不能为空，请正确填写",
name:"UserName", anchor:"90%" },{ xtype:"textfield", fieldLabel:"昵称", // id:"SmallName",
// name:"SmallName",
// anchor:"90%"
// },{
// xtype:"datefield",
// fieldLabel:"注册日期",
// //id:"RegDate",
// name:"RegDate",
// anchor:"90%"
// }],
// });
// 接受页面
// GetForm.aspx
// 的 cs
// 代码为：
// protected
// void
// Page_Load(object
// sender,
// EventArgs
// e) {
// string
// UserName
// =
// Request.Form["UserName"];
// string
// SmallName
// =
// Request.Form["SmallName"];
// string
// RegDate
// =
// Request.Form["RegDate"];
// Response.Write(UserName
// +
// "<br/>"
// +
// SmallName
// +
// "<br/>
// " +
// RegDate);
// }
// 因为很简单，我做个简要说明：
// //几点说明
// 1.首先定义
// submit
// 参数的执行函数，即：
// submit:
// function(){
// this.getEl().dom.action
// =
// 'GetForm.aspx',//转向页面地
// 址
// this.getEl().dom.method='POST',//方式
// this.getEl().dom.submit();//提交！
// },
// 2.为按钮添加触发相应的提交（取消）事件（这样就不是默认的
// ajax
// 提交）：
// buttons:[{text:"确定",handler:login,formBind:true},{text:"取消
// ",handler:reset}]
// });
// function
// login(){
// form.form.submit();//提交
// }
// function
// reset(){
// form.form.reset();//取消
} 3.如果你想绑定验证，在 form 表单添加参数 monitorValid:true,然后在按钮 配置参数中添加 formBind：true，如 buttons:[{text:"确定",handler:login,formBind:true},{text:"取消 ",handler:reset}] 则只有所有的填写字段都满足条件时，"确定"方可提交！如下图，
好了，一个简单的 formpanel 的提交的原理弄清楚啦！ 有关 form 提交数据的方法有多种，大家可以参考 http:// www.17ext.com/showtopic-55.aspx
// （三种 ext
// 提交数据的方式），
// 以后有机会我们再讨论！
// 下面我们来做个复杂点（只是样子）的
// form，示例一下（还是上面的原理）！
// 效果图：
传到 GetForm.aspx 页面后显示：
不过在传过来的页面要记得 ValidateRequest="false"，安全编码我就暂且不 讨论了！ js 代码： Ext.onReady(function(){ Ext.QuickTips.init(); var form=new Ext.FormPanel({ frame:true, width:500, monitorValid:true,// 把有
// formBind:true
// 的按钮和验证绑定
// layout:"form",
// labelWidth:55,
// title:"添加个人信息",
// labelAlign:"right",
// renderTo:Ext.getBody(),
// submit:
// function(){
// this.getEl().dom.action
// =
// 'GetForm.aspx',
// this.getEl().dom.method='POST',
// this.getEl().dom.submit();
// },
// items:[{
// xtype:"panel",
// layout:"column",
// fieldLabel:"用户名",
// isFormField:true,
// items:[{
// columnWidth:.5,
// xtype:"textfield",
allowBlank:false, blankText:"不能为空，请填写", name:"UserName", anchor:"90%" },{ columnWidth:.20, layout:"form", labelWidth:40, labelAlign:"right", items:[{ xtype:"radio", fieldLabel:"性别", boxLabel:"男", name:"Sex", checked:true, inputValue:"man",// 这里如果用
// value，值是
// on，所以用
// inputValue（出现这种情况的是
// radio,checkbox）
// anchor:"95%"
// }]
// },{
// columnWidth:.30,
// layout:"form",
// labelWidth:1,//让标签宽度为很小的值（奇怪的是为
// 0 时
// 反而不行）
// items:[{
// xtype:"radio",
// boxLabel:"女",
// labelSeparator:"",//去除分隔符“：”
// name:"Sex",
// inputValue:"woman",
// anchor:"95%"
// }]
// }]
// },{//上面是第一行
// xtype:"panel",
// layout:"column",
// fieldLabel:"出生日期",
// isFormField:true,
// items:[{
// columnWidth:.5,
// xtype:"datefield",
// name:"BirthDate",
// anchor:"90%"
// },{
columnWidth:.5, layout:"form", labelWidth:40,// 注意，这个参数在这里可以调整简单 fieldLabel
// 的布局位置 items:[{ xtype:"combo",
// name:"Degree",
// fieldLabel:"学位",
// store:["小学","初中","高中","专科","本科","硕
// 士","博士"],
// emptyText:"请选择适合你的学历 ",
// anchor:"90%" }] }]
// },{//上面是第二行 xtype:"panel",
// layout:"column",
// isFormField:true,
// fieldLabel:"使用框架", items:[{
// columnWidth:.2,
// xtype:"checkbox",
// boxLabel:"Spring.net",
// name:"SpringNet",
// inputValue:"spring"//这里如果用
// value，值是 on，所以 用 inputValue
// },{ columnWidth:.2,
// layout:"form", labelWidth:1,
// items:[{ xtype:"checkbox",
// boxLabel:"Nhibernate",
// labelSeparator:"",
// name:"NHibernate",
// inputValue:"nhibernate",
// anchor:"95%" }] },{
// columnWidth:.6,
// layout:"form", labelWidth:1,
// items:[{
xtype:"checkbox", boxLabel:"Linq", labelSeparator:"", name:"Linq", inputValue:"linq", anchor:"95%" }] }] },{// 上面是第三行
// xtype:"textfield",
// fieldLabel:"Email",
// name:"Email",
// vtype:"email",//email
// 验证,如果想自定义验证的话，请参见前面
// 的文章
// vtypeText:"email
// 格式错误！",
// anchor:"56%"//控制文本框的长度
// },{//上面是第四行
// xtype:"textarea",
// fieldLabel:"个性签名",
// name:"OneWord",
// height:50,
// anchor:"95%"
// },{//上面是第五行
// xtype:"htmleditor",
// fieldLabel:"想说的话",
// name:"WantToSay",
// anchor:"95%",
// enableAlignments:false,//去除左右对齐工具栏
// enableLists:false//去除列表工具栏
// }],
// buttons:[{text:"确定",handler:login,formBind:true},{text:"取消
// ",handler:reset}]
// });
// function
// login(){
// form.form.submit();
// }
// function
// reset(){
// form.form.reset();
// }
// });
ExtJs2 学习 系列 系列(9)--Ext.TabPanel 之第一式
js 代码: Ext.onReady(function(){ var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), width:300, activeTab:0,// 当前激活标签
// frame:true,
// items:[{
// contentEl:"tabOne",//标签页的页面元素
// id(加入你想显示
// 的话)
// title:"浪曦",
// closable:true//是否现实关闭按钮,默认为
// false
// },{
// contentEl:"tabTwo",
// title:"博客园兄弟们可好"
// }]
// });
// });
// html
// 代码:
// <body
// style="margin:10px;">
// <div>
// <div
// id="tabOne"
// class="x-hide-display">i
// am
// tabOne!</di
// v>
// <div
// id="tabTwo"
// class="x-hide-display">i
// am
// tabTwo!</div
// >
// </div>
// </body>
// <!--注意
// class
// 类型,设为
// x-hide-display,以正常显示-->
// 在这里例举几个参数:
// //几个相关参数
// 1.tabPosition:"bottom"//选项卡的位置,枚举值
// bottom,top.默认为
// top(只
// 有
// top
// 的时候才能选项卡的滚动!)
// 2.tabTip:"提示"//必须先调用
// Ext.QuickTips.init();才有效果
// 经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但
// 是很稳定的简单方法(已经在项目中验证没有出现问题).
就是:使用 iframe 作为 tab 的标签页内容. 1.用 iframe 加载其他完整页面的 tabpanel. 效果图:
点击链接"换成博客园",
html 代码: <body style="margin:10px;"> <div> <a href="javascript:void(0)" onclick="parent.frames['mainFr ame'].location='http://www.cnblogs.com'">换成博客园</a> <iframe id="mainFrame" name="mainFrame" src="http://w ww.baidu.com" frameborder="0" height="100%" width="100%" sty le="overflow:hidden;"></iframe> </div> </body> js 代码: Ext.onReady(function(){ var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), activeTab:0, height:700,// 当用
// viewport
// 布局时,这个
// height
// 可以省去
// frame:true,
// items:[{
// contentEl:"mainFrame",
// tabTip:"fengjian",
// title:"加载页面的标签页",
closable:true }] }); });
(10)--Ext.TabPanel 之第二式 2.动态添加 tabpanel 的标签页 效果图:
点击"添加新标签页",会添加一个标签页,而且激活这个新的标签页. html 代码: <body style="margin:10px;"> <div> <a id="AddNewTab" href="javascript:void(0)">添加新标签页</a> </div> </body> js 代码: Ext.onReady(function(){ Ext.QuickTips.init(); var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), activeTab:0, height:700, frame:true, items:[{ title:"autoLoad 为 html 简单页面演示", autoLoad:{url:"tab1.htm",scripts:true}
}] }); // 下面是添加新标签页的关键代码,很简单方便 var index=0;
// Ext.get("AddNewTab").on("click",function(){ tabsDemo.add({
// title:"newtab", id:"newtab"+index, html:"new tab", closable:true });
// tabsDemo.setActiveTab("newtab"+index); index++; }) }); 简单说明:
// 其实添加的话,只要 add()方法就可以了,但是我们还要激活这个新的标签 页,就必须 setActiveTab(newtab 的索引或
// id),关键就是我们不好判断这个索 引,所以只好设置个递增的全局变量 index 来给 newtab 取名，这样我们也就能
// 准确的获取新的不重复的 newtab 了，也就容易激活了。而且我们可以通过下 图看出来。
3.稍微修改上面的例子 tabpanel(官方的例子) 效果图:
我就不多说了，关键的几个参数注释了下 <body style="margin:10px;"> <div> <div id="AddBtn"></div> </div> </body> js 代码： Ext.onReady(function(){ Ext.QuickTips.init(); var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), //resizeTabs:true,宽度能自动变化,但是影响标题的显示 activeTab:0, height:200, enableTabScroll:true,//挤的时候能够滚动收缩 width:200, frame:true, items:[{ title:"tab advantage", html:"sample1" }] }); var index=0; //就是下面这个函数,关键的地方,非常简单也非常实用 function addTab() { tabsDemo.add({ title:"newtab", id:"newtab"+index, html:"new tab"+index, closable:true }); tabsDemo.setActiveTab("newtab"+index); index++; } //设置一个按钮(上面的是一个链接,应用有点不同哦) new Ext.Button({ text:"添加新标签页",
handler:addTab }).render(document.body,"AddBtn"); }); 4.为 tabpanel 标签页添加右键菜单 效果图：
点击"关闭其他所有页"后,
其他两个右键菜单还是道理相同. // 几个参数说明 1.enableTabScroll:true//前面已经说过了 2.
// listeners:{"contextmenu":function(参数 1,参数 2,参数 3){ .}}
// //右键菜单事件，三个参数分别为当前 tabpanel，当前标签页 panle，时间 对象 e 3.//扩充
// 2，每个标签页都有激活和去激活事件 activate 和 deactivate，他们的执行函数有个参数，就是当前标签页。
// 例如： items:[{ title:"tab advantage", listeners:{
deactivate:function(a){alert("删除,a 表示当前标签 页");}, activate:function(){alert("激活");} }, html:"sample1" }] 4.menu=new Ext.menu.Menu()// menu
// 组件，就不多说了，后面会专门分
// 析下，不过不要忘记
// menu.showAt(e.getPoint());了
// html
// 代码和上面的例子的
// html
// 代码一样.
// js
// 代码:
// Ext.onReady(function(){
// Ext.QuickTips.init();
// var
// tabsDemo=new
// Ext.TabPanel({
// renderTo:Ext.getBody(),
// //resizeTabs:true,宽度能自动变化,但是影响标题的显示
// activeTab:0,
// height:200,
// enableTabScroll:true,//挤的时候能够滚动收缩
// width:400,
// frame:true,
// //下面是比上面例子新增的关键右键菜单代码
// listeners:{
// //传进去的三个参数分别为:这个
// tabpanel(tabsDemo),当前
// 标签页,事件对象
// e
// "contextmenu":function(tdemo,myitem,e){
// menu=new
// Ext.menu.Menu([{
// text:"关闭当前页",
// handler:function(){
// tdemo.remove(myitem);
// }
// },{
// text:"关闭其他所有页",
// handler:function(){
// //循环遍历
// tdemo.items.each(function(item){
// if(item.closable&;&;item!=myitem)
// {
// //可以关闭的其他所有标签页全部关
// 掉
// tdemo.remove(item);
// }
}); } },{ text:"新建标签页", handler:addTab }]); // 显示在当前位置
// menu.showAt(e.getPoint()); } },
// items:[{ title:"tab advantage",
// html:"sample1" }] }); var
// index=0; function addTab() {
// tabsDemo.add({
// title:"ntab"+index,
// id:"newtab"+index, html:"new
// tab"+index, closable:true });
// tabsDemo.setActiveTab("newtab"+index);
// index++; } new Ext.Button({
// text:"添加新标签页", handler:addTab
// }).render(document.body,"AddBtn");
// }); 关于 tabpanel 的简单使用就说到了这里.
在表格中出现鼠标一放到某列上就显示提示信息 renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ } 1.value 是当前单元格的值 2.cellmeta 里保存的是 cellId 单元格 id。 3.record 是这行的所有数据，你想要什么，record.data["id"]这样就获得 了。 4.rowIndex 是行号，不是从头往下数的意思，而是计算了分页以后的结果。 5.columnIndex 列号太简单了。 6.store，实际上这个是你构造表格时候传递的 ds，也就是说表格里所有的 数据，你都可以随便调用。
1. var cm = new Ext.grid.Column([{ 2. header: "描述", dataIndex: 'description', 3. 4. width: 80, renderer: function(value,cellmeta,record,rowIndex,columnIn 5. dex,store){ 6. var name=""; if(value.length > 20){ 7. 8. for(int i=0;i<value.length;i=i+20){ name = name+value.sunString(i,i+20)+''; 9. 10. } 11. }else{ 12. name = value; 13. } 14. return '<font ext:qtip="'+name+'">'+value+'</font>; 15.},{