`
peizhe1232
  • 浏览: 68935 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多


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

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

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

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

引入ExtJs的框架文件,该文件方便调试,在实际应用中,直接引用ext-all.js文件-->
<scripttype="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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics