工具栏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 微调字段