好久没有写系列博文了，突然感觉有点生疏了。最近忙于毕业的有关事宜，加上也算是参加了工作，虽然是跟着老师，但也算是正式进入开发的行列，最近忙于某银行的一个项目，用了EXTJS，由于项目催的比较紧，所以也没有时间去系统的学习它，只能是边学边用了。Extjs这东西给我的感觉，在功能和UI上确实都很强大，作出的界面比自己写html+css+js要好看的多。但用了一段时间之后不得不让我吐槽，太难用了，一些配置太繁琐，很多东西都很零碎，但没办法，谁让人家功能强大，所以也借此机会总结一些它常用的功能，方便以后使用和新入门的童鞋查看。首先今天为大家带来的是extjs开发环境的配置和表单的使用。这里主要是以java web开发环境配置为主。

1.首先到官网下载相关文件：http://www.sencha.com/products/extjs

2.解压后把全部文件添加到webroot文件夹下，其实可以只加有关文件，具体加哪些，自己google。

3.引入ExtJs的样式文件
   

引入ExtJs的框架文件，该文件方便调试，在实际应用中，直接引用ext-all.js文件-->

4.下载下来的文件中有帮助文档，extjs的帮助文档非常好用，很多功能都有现成的实例，你也可以访问官网上的文档来查看：http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/api


 OK，这样，就算是搭建好了extjs4的开发环境了。貌似很简单哈。下面我们就来看一下表单的写法。详解全在注释里面，自己看啦。

var myForm = Ext.create('Ext.form.Panel',{

//创建一个toolbar，这里主要是把保存按钮（即为提交表单按钮）放在这里

          tbar:[                 {

xtype:'button',

icon:'../p_w_picpaths/save.gif',

text:'保存',

handler:function(){//注册点击保存按钮触发的事件

                   myForm.submit();//提交表单

                }}          

            ],

            width:'100%',height:"100%",

          defaultType:'textfield',//设置表单默认类型

          bodyStyle:'padding:5px',

          msgTarget:'side',

          renderTo:Ext.getBody(),//把表单渲染到body里面

          standardSubmit:true,//设置表单为标准提交

url:'InstitutionAction!saveOrUpdate',//设置表单提交地址

          //items属性里面包含表单的所用控件

          items:[

             {

fieldLabel:'机构代码',

name:'institution.id',

//设置不能为空，如果此输入框为空时，表达那不能提交

allowBlank:false,

value:'${institution.id}',

readOnly:true//设置为只读

}},

             {

fieldLabel:'机构名称',

name:'institution.name',

allowBlank:false,

value:'${institution.name}'},

             {

fieldLabel:'机构地址',

name:'institution.address',

allowBlank:false,

value:'${institution.address}'

},


{

fieldLabel:'负责人',n

ame:'institution.manager',

value:'${institution.manager}'

},

             {

fieldLabel:'联系电话',

name:'institution.phone',

value:'${institution.phone}'

}

          ]

          });