ext 4 学习读书笔记1

好书推荐,EXT JS WEB应用程序开发指南,第2版本,很不错的工具书

一 EXT.WINDOW.MESSAGEBOX

1)基本alert
      <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');
});
  </script>

  注意alert不是阻塞的。

2）confirm
   Ext.onReady(function(){
Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);
function callBack(id){
alert('单击的按钮ID是：'+id);
}
});

3)prompt:
    Ext.onReady(function(){
Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");
function callBack(id,msg){
alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
}
  });
4)wait:
    Ext.onReady(function(){
Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{
text : '进度条上的文字'
});
})

5) show:
    Ext.onReady(function(){
Ext.MessageBox.show({
title:'提示',
msg:'我有三个按钮，和一个多行文本区。',
modal:true,
prompt:true,
value:'请输入',
fn:callBack,
buttons:Ext.Msg.YESNOCANCEL,
icon:Ext.Msg.QUESTION 
})
function callBack(id,msg){
alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
}
  });

6)动态更新进度条
    Ext.onReady(function(){
var msgBox = Ext.MessageBox.show({
title:'提示',
msg:'动态跟新的进度条和信息文字',
modal:true,
width:300,
progress:true
})

var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = '';//进度条信息

var task = {
run:function(){
count++;
//计算进度
percentage = count/10;
//生成进度条文字
progressText = '当前完成度：'+percentage*100 + "%";
//更新信息提示对话框
msgBox.updateProgress(percentage,progressText,
'当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
//刷新10次后关闭信息提示对话框
if(count > 10){
Ext.TaskManager.stop(task);
msgBox.hide();
}

},
interval:1000
}

Ext.TaskManager.start(task);
});


二  progress bar进度条
   1)手工模式
      Ext.onReady(function(){
var ProgressBar = new Ext.ProgressBar({
width:300,//设定进度条的宽度
renderTo:'ProgressBar'
});
var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = '';//进度条信息

Ext.TaskManager.start({
run:function(){
count++;
//刷新10次后关闭信息提示对话框
if(count > 10){
ProgressBar.hide();
}
//计算进度
percentage = count/10;
progressText = percentage * 100 + '%'
//更新信息提示对话框
ProgressBar.updateProgress(percentage,progressText,true);
},
interval:1000,//设置时间间隔
repeat : 6//设置执行次数
});
});

   2）自动模式
         Ext.onReady(function(){
var ProgressBar = new Ext.ProgressBar({
width:300,//设定进度条的宽度
renderTo:'ProgressBar'
                       cls:'customer' //定义样式
});
ProgressBar.wait({
duration:10000,//进度条持续更新10秒钟
interval:1000,//每1秒钟更新一次
increment:10,//进度条分10次更新完毕
scope:this,//回调函数的执行范围
text : 'waiting',//进度条上的文字
fn:function(){//更新完成后调用的回调函数
alert('更新完毕');
}
});
});



三 菜单工具栏
  1） 基本
    Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
renderTo:'toolbar',
width:500
});
toolbar.add(
{text:'新建'},{text:'打开'},
{text:'编辑'},{text:'保存'}, //加入按钮
'-',                          //加入工具栏分隔符
{     //加入表单元素
xtype:'textfield',
hideLabel : true,
width:150
},
'->',                        //加入一个充满工具栏的空白元素
'<a href=#>超连接</div>',    //加入一个Element元素
{xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素
'静态文本'                   //加入一个简单字符串
);
});

   2）menu基本
        Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
renderTo:'toolbar',
width:300
});
var fileMenu = new Ext.menu.Menu({//文件创建菜单
shadow : 'frame',//设置菜单四条边都有阴影
allowOtherMenus : true,
items : [
new Ext.menu.Item({
text: '新建',//菜单项名称
menuHideDelay:1000,
handler:onMenuItem//菜单项处理函数
}),//添加菜单项
{text: '打开',handler:onMenuItem},
{text: '关闭',handler:onMenuItem}
]
});
var editMenu = new Ext.menu.Menu({//编辑创建菜单
shadow : 'drop',//设置菜单在右下两条边有阴影
allowOtherMenus : true,
items : [
{text: '复制',handler:onMenuItem},//添加菜单项
{text: '粘贴',handler:onMenuItem},
{text: '剪切',handler:onMenuItem}
]
});
toolbar.add(
{text : '文件', menu : fileMenu},//将菜单加入工具栏
{text : '编辑', menu : editMenu}
);
function onMenuItem(item){//菜单项的回调方法
alert(item.text);//取得菜单项的text属性
}
});

四 表单
    1） 表单的出错提示信息位置例子
       Ext.onReady(function(){
Ext.QuickTips.init();//初始化信息提示功能
var form = new Ext.form.Panel({
title:'表单',//表单标题
height:120,//表单高度
width:200,//表单宽度
frame:true,//是否渲染表单
renderTo :'form',
defaults:{//统一设置表单字段默认属性
//autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
blankText : '不允许为空',
labelAlign : 'left',//标签对齐方式
msgTarget :'qtip'          //显示一个浮动的提示信息
//msgTarget :'title'       //显示一个浏览器原始的浮动提示信息
//msgTarget :'under'       //在字段下方显示一个提示信息
//msgTarget :'side'        //在字段的右边显示一个提示信息
//msgTarget :'none'        //不显示提示信息
//msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息
},
items:[{
xtype : 'textfield',
fieldLabel : '姓名'//标签内容
},{
xtype : 'numberfield',
fieldLabel : '年龄'
}]
});
});

2）表单中的文本框
      Ext.onReady(function(){
Ext.QuickTips.init();
var loginForm = new Ext.form.Panel({
title:'Ext.form.field.Text示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:120,
width:200,
renderTo :'form',
defaultType: 'textfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
labelAlign : 'left',//标签对齐方式
msgTarget :'side'   //在字段的右边显示一个提示信息
},
items:[{
fieldLabel : '用户名',
name : 'userName',
selectOnFocus : true,//得到焦点时自动选择文本
//验证电子邮件格式的正则表达式
regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:'格式错误'//验证错误之后的提示信息,
},{
name : 'password',
fieldLabel : '密码',
inputType : 'password'//设置输入类型为password
}
],
buttons:[{
text : '登陆',
handler : function(){
loginForm.form.setValues({userName:'user@com',password:'123456'});
}
}]
});
});

3） 获得EXT FORM中的值的方法
    function showValue(){
var memo = testForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//取得控件值
}

4) number限制输入数字框
    var form = new Ext.form.FormPanel({
title:'Ext.form.field.Number示例',
bodyStyle:'padding:5 5 5 5',//表单边距
renderTo :'form',
frame : true,
height:150,
width:250,
defaultType: 'numberfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 200,//字段宽度
labelAlign : 'left',//标签对齐方式
msgTarget :'side'   //在字段的右边显示一个提示信息
},
items:[{
fieldLabel:'整数',
hideTrigger : true,//隐藏微调按钮
allowDecimals : false,//不允许输入小数
nanText :'请输入有效的整数'//无效数字提示
},{
fieldLabel:'小数',
decimalPrecision : 2,//精确到小数点后两位
allowDecimals : true,//允许输入小数
nanText :'请输入有效的小数'//无效数字提示
},{
fieldLabel:'数字限制',
baseChars :'12345'//输入数字范围
},{
fieldLabel:'数值限制',
maxValue : 100,//最大值
minValue : 50//最小值
}]
});

5 checkboxgroup和radiogroup(4.0才支持）
    new Ext.form.Panel({
title:'CheckboxGroup和RadioGroup组件示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:140,
width:270,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'radiogroup',
fieldLabel : '性别',
columns : 2,//2列
items: [
{boxLabel : '男',name: 'sex', inputValue: 'male'},
{boxLabel : '女',name: 'sex', inputValue: 'female'}
]
},{
xtype : 'checkboxgroup',
fieldLabel : '爱好',
columns : 3,//3列
items: [
{boxLabel : '游泳',name: 'swim'},
{boxLabel : '散步',name: 'walk'},
{boxLabel : '阅读',name: 'read'},
{boxLabel : '游戏',name: 'game'},
{boxLabel : '电影',name: 'movie'}
]
}]
});

6 EXT.FORM.field.trigger例子
     Ext.onReady(function(){
var testForm = new Ext.form.Panel({
title:'Ext.form.field.Trigger示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:270,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'triggerfield',
id:'memo',
fieldLabel:'触发字段',
hideTrigger : false,//不隐藏触发按钮
onTriggerClick : function(){
var memo = testForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//取得控件值
Ext.getCmp('memo').setValue('test');
}
}]
});
});


      
7 本地数据源的组合框示例
      Ext.onReady(function(){
//创建数据模型
Ext.regModel('PostInfo', {
    fields: [{name: 'province'},{name: 'post'}]
});
//定义组合框中显示的数据源
var postStore = Ext.create('Ext.data.Store',{
model : 'PostInfo',
data : [
{province:'北京',post:'100000'},
{province:'通县',post:'101100'},
{province:'昌平',post:'102200'},
{province:'大兴',post:'102600'},
{province:'密云',post:'101500'},
{province:'延庆',post:'102100'},
{province:'顺义',post:'101300'},
{province:'怀柔',post:'101400'}
]
});
//创建表单
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.ComboBox本地数据源示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:270,
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'combo',
listConfig : {
emptyText : '未找到匹配值',//当值不在列表是的提示信息
maxHeight : 60//设置下拉列表的最大高度为60像素
},
name:'post',
autoSelect : true,
fieldLabel:'邮政编码',
triggerAction: 'all',//单击触发按钮显示全部数据
store : postStore,//设置数据源
displayField:'province',//定义要显示的字段
valueField:'post',//定义值字段
queryMode: 'local',//本地模式
forceSelection : true,//要求输入值必须在列表中存在
typeAhead : true,//允许自动选择匹配的剩余部分文本
value:'102600'//默认选择大兴
}]
});


8 如果是远程AJAX方式
       Ext.onReady(function(){
//创建数据模型
Ext.regModel('BookInfo', {
    fields: [{name: 'bookName'}]
});
//定义组合框中显示的数据源
var bookStore = Ext.create('Ext.data.Store',{
model : 'BookInfo',
proxy: {
        type: 'ajax',//Ext.data.AjaxProxy
        url : 'bookSearchServer.jsp',
        reader: new Ext.data.ArrayReader({model : 'BookInfo'})
    }
});

           。。。。。。。。。。。。。。。。。。。。
         items:[{
xtype : 'combo',
fieldLabel:'书籍列表',
listConfig : {
loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
emptyText : '未找到匹配值',//当值不在列表是的提示信息
maxHeight : 100//设置下拉列表的最大高度为60像素
},
allQuery:'allbook',//查询全部信息的查询字符串
minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量
queryDelay : 300,//查询延迟时间
queryParam : 'searchbook',//查询的名字
triggerAction: 'all',//单击触发按钮显示全部数据
store : bookStore,//设置数据源
displayField:'bookName',//定义要显示的字段
valueField:'bookName',//定义值字段
queryMode: 'remote'//远程模式
}]

9 时间框
     Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Time示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:300,
items:[{
fieldLabel:'时间选择框',
xtype : 'timefield',
width : 220,
labelSeparator :'：',//分隔符
msgTarget :'side',//在字段的右边显示一个提示信息
autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
maxValue : '18:00',//最大时间
maxText : '时间应小于{0}',//大于最大时间的提示信息
minValue : '10:00',//最小时间
minText : '时间应大于{0}',//小于最小时间的提示信息
pickerMaxHeight : 70,//下拉列表的最大高度
increment : 60,//时间间隔为60分钟
format : 'G时i分s秒 ',//G标示为24时计时法
invalidText :'时间格式无效'
}]
});
});

10 日期框
   Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Date示例',
frame : true,
height:100,
width:300,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
fieldLabel:'日期选择框',
xtype : 'datefield',
labelSeparator :'：',//分隔符
msgTarget :'side',//在字段的右边显示一个提示信息
autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
format:'Y年m月d日',//显示日期的格式
maxValue :'12/31/2008',//允许选择的最大日期
minValue :'01/01/2008',//允许选择的最小日期
disabledDates : ['2008年03月12日'],//禁止选择2008年03月12日
disabledDatesText :'禁止选择该日期',
disabledDays : [0,6],//禁止选择星期日和星期六
disabledDaysText : '禁止选择该日期',
width : 220,
value : '12/31/2008'
}]
});

//其中注意disableddates的日期格式要与formatdate的日期格式一样


11 隐藏hidden域
   items:[{
name:'userName',
fieldLabel:'姓名'
},{//隐藏域
name:'age',
xtype : 'hidden'
}

12 ext.form.fieldcontainer容器字段
    将多个字段框合在一起，比如生产日期xxx年XXX月XXX日，三个文本框一起验证
   Ext.QuickTips.init();//初始化提示
Ext.create('Ext.form.Panel',{
title:'Ext.form.FieldContainer示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width : 260,//字段宽度
msgTarget : 'side'
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'商品名称'
},{
        xtype: 'fieldcontainer',
        fieldLabel: '生产日期',
        layout: {//设置容器字段布局
            type: 'hbox',
            align: 'middle'//垂直居中
        },
        combineErrors : true,//合并展示错误信息
        fieldDefaults: {
                    hideLabel: true,//隐藏字段标签
                    allowBlank : false//设置字段值不允许为空
                },
                defaultType: 'textfield',//设置表单字段的默认类型
        items: [{
            fieldLabel: '年',
            flex: 1,
            inputId : 'yearId'
        },{
                    xtype: 'label',
                    forId : 'yearId',
                    text: '年'
                },{
            fieldLabel: '月',
            flex: 1,
            inputId : 'monthId'
        },{
                    xtype: 'label',
                    forId : 'monthId',
                    text: '月'
                },{
            fieldLabel: '日',
            flex: 1,
            inputId : 'dayId'
        },{
                    xtype: 'label',
                    forId : 'dayId',
                    text: '日'
                }]
    },{
fieldLabel:'产地来源'
}]
});

13 上传表单
    var uploadForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.File示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:300,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
labelAlign : 'left',//标签对齐方式
msgTarget :'side'   //在字段的右边显示一个提示信息
},
items:[{
        xtype: 'filefield',
        name: 'photo',
        fieldLabel: '照片',
        anchor: '100%',
        buttonText: '选择照片...'
    }],
    buttons: [{
        text: '上传文件',
        handler: function() {
            var form = uploadForm.getForm();
            if(form.isValid()){
                form.submit({
                    url: 'uploadServer.jsp',
                    waitMsg: '正在上传照片文件请稍候...',
                    success: function(fp, o) {
                        Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');
                    }
                });
            }
        }
    }]
});


14 自定义VTYPE验证
    Ext.onReady(function(){
//自定义电话号码的vtype验证
Ext.apply(Ext.form.field.VTypes, {
    phone:  function(v) {
    //规则区号（3-4位数字）-电话号码（7-8位数字）
        return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);
    },
    phoneText: '请输入有效的电话号码',
    phoneMask: /[\d-]/i//只允许输入数字和-号
});
Ext.QuickTips.init();
Ext.create('Ext.form.Panel',{
title:'自定义电话号码验证示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 270,//字段宽度
msgTarget : 'side'
},
items:[{
fieldLabel:'住宅号码',
vtype:'phone'//使用电话类型验证
},{
fieldLabel:'办公号码',
vtype:'phone'//使用电话类型验证
}]
});
});

15 多字段验证扩展
   比如验证多个日期字段
   Ext.onReady(function(){
//自定义VType类型，验证日期选择范围
Ext.apply(Ext.form.field.VTypes, {
//验证方法
dateRange : function(val, field) {
var beginDate = null,//开始日期
beginDateCmp = null,//开始日期组件
endDate = null,//结束日期
endDateCmp = null,//结束日期组件
validStatus = true;//验证状态
if(field.dateRange){
//获取开始时间
if(!Ext.isEmpty(field.dateRange.begin)){
beginDateCmp = Ext.getCmp(field.dateRange.begin);
beginDate = beginDateCmp.getValue();
}
//获取结束时间
if(!Ext.isEmpty(field.dateRange.end)){
endDateCmp = Ext.getCmp(field.dateRange.end);
endDate = endDateCmp.getValue();
}
}
//如果开始日期或结束日期有一个为空则校验通过
if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
validStatus =  beginDate <= endDate;
}

return validStatus;
},
//验证提示信息
dateRangeText : '开始日期不能大于结束日期，请重新选择。'
});
Ext.QuickTips.init();//初始化提示;
var dateForm = Ext.create('Ext.form.Panel',{
title:'自定义日期范围验证示例',
frame : true,
width:250,
renderTo: Ext.getBody(),
bodyPadding: 5,
fieldDefaults:{//统一设置表单字段默认属性
autoFitErrors : false,//不自动调整字段宽度
labelSeparator :'：',//分隔符
labelWidth : 90,//标签宽度
width : 210,//字段宽度
format:'Y年n月j日',//显示日期的格式
editable : false,//设置只读
allowBlank : false,//不允许为空
msgTarget : 'side'//设置提示信息展示位置
},
defaultType: 'datefield',//设置表单字段的默认类型
items:[{
id:'beginDate1',
fieldLabel:'入学开始日期',
dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'endDate1',
fieldLabel:'入学结束日期',
dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'beginDate2',
fieldLabel:'毕业开始日期',
dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'endDate2',
fieldLabel:'毕业结束日期',
dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
vtype:'dateRange'
}]
});
});

16 表单
   1）同步加载表单（跟服务端沟通）
          //表单加载数据的回调函数
function loadIntroduction(){
var params = productForm.getForm().getValues();
productForm.getForm().load({
params : params,//传递参数
url : 'productServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','产品简介加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);
}
});


   2）AJAX
     function login(){//提交表单
loginForm.getForm().submit({
clientValidation:true,//进行客户端验证
url : 'loginServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','系统登陆成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);
}
});