java程序员菜鸟进阶（十）Extjs4常用功能（一）——extjs开发环境的配置和表单的使用

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

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

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

3.引入ExtJs的样式文件
<link type="text/css" rel="Stylesheet" href="extjs/resources/css/ext-all.css" />     

引入ExtJs的框架文件，该文件方便调试，在实际应用中，直接引用ext-all.js文件-->
 <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

 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:'../images/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}'
}
           ]
           });

我参加了大学生IT博客大赛，希望有51CTO账号的童鞋多多支持：http://blog.51cto.com/contest/college2013/3545281。