ext4学习读书笔记(转)

ext4学习读书笔记(转)

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

一 EXT.WINDOW.MESSAGEBOX

1)基本alert

 
    <link rel="stylesheet" type="text/css"href="http://jackyrong.iteye.com/ext-4.0/resources/css/ext-all.css" target="_blank"rel="nofollow"> <script
type="text/javascript"src="http://jackyrong.iteye.com/ext-4.0/bootstrap.js"rel="nofollow"/> <script type="text/javascript"src="http://jackyrong.iteye.com/ext-4.0/locale/ext-lang-zh_CN.js"rel="nofollow"/> <script type="text/javascript">

Ext.onReady(function(){

Ext.Msg.alert('提示','<fontcolor=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

},

'->',                       //加入一个充满工具栏的空白元素

'<ahref="http://jackyrong.iteye.com/blog/1391982#>超连接</div>" target="_blank"rel="nofollow"> {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中的值的方法

    functionshowValue(){

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才支持）

    newExt.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