工具栏ToolBar和菜单栏Menu入门

一：Ext.toolbar.ToolBar是工具栏的基础组件，相当于容器，在其中可以放置各种工具栏元素：按钮、文字和菜单组件。
Eg:
//简单的工具栏
var toolbar=new Ext.toolbar.Toolbar({
renderTo:'toolbar',
width:300
});
//向工具栏中添加按钮（添加了新建、打开、保存三个菜单按钮）
toolbar.add([
{
text:'新建',//按钮上的文字
handler:onButtonClick,//单击按钮的处理函数
iconCls:'newIcon'//在按钮上显示的图标
},
{ text:'打开',handler:onButtonClick,iconCls:'openIcon'},
{ text:'保存',handler:onButtonClick,iconCls:'saveIcon'}
]);
function onButtonClick(btn){//点击按钮时调用的处理函数
alert(btn.text);
}
复杂的工具栏：
//复杂的工具栏
var toolbar=new Ext.toolbar.Toolbar({
renderTo:'toolbar',
width:500
});
//向工具栏中添加按钮（添加了新建、打开、保存三个菜单按钮）
toolbar.add([
{text:'新建'},{text:'打开'},{text:'编辑'},{text:'保存'},
'-',//创建一个工具栏分割元素
{//加入表单元素
xtype:'textfield',
hideLabel:true,
width:150
},
'->',//创建一个充满工具栏的空白元素
'<a href=#>超链接</a>',
{xtype:'tbspacer',width:50},//加入一个空白元素，宽度为50像素
'静态文本'//加入一个简单的字符串
]);
//复杂的工具栏
var toolbar=new Ext.toolbar.Toolbar({
renderTo:'toolbar',
width:500,
items:[{
text:'新建',
handler:onButtonClick//点击按钮的处理函数
},
{text:'打开', handler:onButtonClick},
{text:'保存', handler:onButtonClick},
]
});
function onButtonClick(btn){//点击按钮时调用的处理函数
alert(btn.text);//显示按钮上的文字
}
Ext.get('enableBtn').on('click',function(){
toolbar.enable();//启用工具栏
});
Ext.get('disableBtn').on('click',function(){
toolbar.disable();//禁用工具栏
});
二：菜单栏
Ext.menu.Menu菜单：菜单项的容器，在菜单组件中，可以容纳Ext.menu.Item菜单项也可以容纳普通组件。
//多级菜单
var toolbar = new Ext.toolbar.Toolbar({
renderTo : 'toolbar',
width : 300
});
var infoMenu = new Ext.menu.Menu({//一级菜单
ignoreParentClicks : true,//忽略父菜单的单击事件
plain : true,//是否移除菜单左侧的竖线
items : [ {
text : '个人信息',
menu : new Ext.menu.Menu({//二级菜单
ignoreParentClicks : true,//忽略父菜单的单击事件
items : [ {
text : '基本信息',
menu : new Ext.menu.Menu({//三级菜单
items : [ {
text : '身高',
handler : onMenuItem
}, {
text : '体重',
handler : onMenuItem
} ]
})
} ]
})
}, {
text : '公司信息'
} ]
});

toolbar.add({
text : '设置',
menu : infoMenu
});//将菜单加入工具栏
function onMenuItem(item) {
alert(item.text);//获取菜单项的text属性
}

//带选择框的菜单实例
var themeMenu = new Ext.menu.Menu({//文件创建菜单
items : [ {
text : '主体颜色',
menu : new Ext.menu.Menu({
items : [ {
text : '红色主题',
checked : true,//初始为选中状态
group : 'theme',//为单选项进行分组
checkHandler : onItemCheck
}, {
text : '蓝色颜色',
checked : false,
group : 'theme',//为单选项进行分组
checkHandler : onItemCheck
}, {
text : '黑色颜色',
checked : false,
group : 'theme',//为单选项进行分组
checkHandler : onItemCheck
} ]
})
}, {
text : '是否启用',
checked : false
} ]
});
toolbar.add({
text : '风格选择',
menu : themeMenu
});//将菜单加入工具栏
function onItemCheck(item){
alert(item.text);
}
三：最常用的表单
Ext.form.Basic是基本的表单组件，提供了字段管理、数据验证、表单提交、数据加载等功能，它作用于Ext.container.Container容器，但推荐使用Ext.from.Panel作为表单容器，Ext.from.Panel会自动关联到Ext.form.Basic实例，方便进行字段的配置。
Ext.form.Basic 委托于Ext.form.Action进行数据的提交和加载，默认的提交动作是Ext.form.action.Submit 采用Ajax方式进行异步数据提交，如果要用原始方式提交表单可以使用Ext.form.action.standardSubmit方法。如果通过表单进行文件上传，则不能通过标准的Ajax方式进行，在ExtJS内部会通过iframe模拟Ajax进行异步表单文件上传操作。
最基本的表单：
Ext.require([ '*' ]);
Ext.onReady(function() {
Ext.QuickTips.init();//初始化信息提示框功能
var form=new Ext.form.Panel({
title:'表单',//表单标题
height:120,
width:200,
frame:true,//是否渲染表单
renderTo:'form',
defaults:{//统一设置表单字段默认属性
//autoFitErrors:false,//展示错误信息时是否有自动调整字段组件宽度,默认为true
labelSeparator:':',//分隔符
labelWidth:50,//标签宽度
width:150,//字段宽度
allowBlank:false,//是否允许为空
blankText:'不允许为空',
labelAlign:'left',//标签对齐方式
msgTarget:'side'//qtip:显示一个浮动提示信息; title:显示一个浏览器原始的浮动提示信息；
//under:在字段下方显示一个提示信息； side:在字段右边显示一个提示信息；none:不显示提示信息；errorMsg:在errorMsg元素内显示信息
},
items:[
{xtype:'textfield',fieldLabel:'姓名'},
{xtype:'numberfield',fieldLabel:'年龄'}]
});
});

四：表单其他控件

表单其他控件：
//Ext.form.field.Text 示例
var loginForm=new Ext.form.Panel({
title:'Ext.form.field.Text示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame:true,
width:270,
renderTo:'loginForm',
defaultType:'textfield',//设置表单字段的默认类型
defaults:{
labelSeparator:':',//分隔符
labelWidth:60,//标签宽度
width:150,//字段宽度
allowBlank:false,
labelAlign:'left',
msgTarget:'qtip'//设置显示提示信息的位置
},
items:[{
fieldLabel:'用户名',
name:'userName',
selectionOnFocus:true,//得到焦点时自动选择文本
//验证电子邮件格式的正则表达式
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]{2,4})$/,
regexText:'格式错误'//验证错误之后的提示信息
},
{
name:'password',
fieldLabel:'密码',
inputType:'password'//设置输入类型为password
},
{//textarea 实例
xtype:'textarea',
fieldLabel:'备注',
id:'memo',
labelWidth:50,
width:200
},
//数字框
{
xtype:'numberfield',
fieldLabel:'整数',
hideTrigger:true,//隐藏微调按钮
allowDecimals:false,//不允许输入小数
nanText:'请输入有效的整数'//输入无效数字的提示
},
{
xtype:'numberfield',
fieldLabel:'小数',
hideTrigger:false,
decimalPrecision:2,
allowDecimals:true,
nanText:'请输入有效的小数'
},
{
xtype:'numberfield',
fieldLabel:'数字限制',
baseChars:'12345'
},
{
xtype:'numberfield',
fieldLabel:'数值限制',
maxValue:100,
minValue:50
},
//Ext.form.field.Radio 以及Ext.from.field.CheckBox 示例
{
xtype:'radio',
name:'sex',//name相同的单选框会作为一组
fieldLabel:'性别',
boxLabel:'男'
},
{
xtype:'radio',
name:'sex',//name相同的单选框会作为一组
fieldLabel:'性别',
boxLabel:'女'
},{
xtype:'checkboxfield',
name:'swim',
fieldLabel:'爱好',
boxLabel:'游泳'
},
{
xtype:'checkboxfield',
name:'walk',
fieldLabel:'爱好',
boxLabel:'散步'
},
//radiogroup
{
xtype:'radiogroup',
fieldLabel:'性别',
colums:2,//2列
items:[
{boxLabel:'男',name:'sex',inputValue:'male'},
{boxLabel:'女',name:'sex',inputValue:'female'}
]
},
{
xtype:'checkboxgroup',
fieldLabel:'爱好',
width:270,
columns:3,
items:[
{boxLabel:'游泳',name:'swim'},
{boxLabel:'散步',name:'walk'},
{boxLabel:'阅读',name:'read'},
{boxLabel:'游戏',name:'game'},
{boxLabel:'电影',name:'film'}
]
},
//Trigger:扩展自Ext.form.field.Text,增加了一个可以点击的触发按钮
{
xtype:'triggerfield',
id:'memo1',
fieldLabel:'触发字段',
hiderTrigger:false,//不隐藏触发按钮
onTriggerClick:function(){
var memo1=loginForm.getForm().findField("memo1");
alert(memo1.getValue());
Ext.getCmp('memo1').setValue('test');
}
},
//微调按钮的使用
{
xtype:'spinnerfield',
fieldLabel:'微调字段',
id:'salary',
value:100,
onSpinUp:function(){
var salaryCmp=Ext.getCmp('salary');//通过组建的id获取组建对象
//增加默认值
salaryCmp.setValue(Number(salaryCmp.getValue())+1);
},
onSpinDown:function(){
var salaryCmp=Ext.getCmp('salary');//通过组建的id获取组建对象
//增加默认值
salaryCmp.setValue(Number(salaryCmp.getValue())-1);
}
}
],
buttons:[{
text:'登陆',
handler:function(){
loginForm.form.setValues({userName:'user@com',password:'123456'});
}
},
{text:'确定',handler:showValue}
]
});
function showValue(){
var memo=loginForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//获得控制输入的值
}
//Trigger:扩展自Ext.form.field.Text,增加了一个可以点击的触发按钮；

注：在实际开发中很少直接使用Trigger字段，ExtJS对Trigger做了两个基本的扩充：Ext.form.field.Picker和Ext.form.field.Spinner 微调字段