好久没有写系列博文了,突然感觉有点生疏了。最近忙于毕业的有关事宜,加上也算是参加了工作,虽然是跟着老师,但也算是正式进入开发的行列,最近忙于某银行的一个项目,用了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。
分享到:
相关推荐
目录: 一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT...EXTJS4自学手册——页面控件(表单控件)
Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 关于Extjs4开发笔记(二)的补充说明 在Extjs4应用中使用Ext.Loader ======================================= 11条jquery常用技巧和方法...
ExtJS3.0 源码分析与开发实例宝典
个人《Extjs4学习指南》电子文档过程中整理的Myeclipse工程,有以下修改:1、数据库改为Mysql;2、前四章后台改为servlet;3、最后一章后台改为SSH架构。 使用说明:1、BeginExtjs4目录为前四章的例子代码;2、SSH_...
ExtJS 配置和表格控件使用 关于extjs中的GRIDView配置详细操作过程进行描述
从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...
ExtJS4.0图文实例——数据组件介绍及简单应用
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
我也是初学,把自己的学习过程记录下来,供大学参考。 2015年最新的搭建MyEclipse10+Spket+ExtJS的开发环境介绍
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle...
4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据,支持xlsx和xls文件。 6、资源管理(菜单管理)。 7、用户管理和部门管理。 8、权限管理。不仅...
Extjs4API文档阅读(三)——布局和容器[参照].pdf
extjs4环境搭建
第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数(二) 第十四讲.初识Ajax 第十五讲.ExtJS对Ajax支持-注册用户实例 第十六讲.ExtJS对Ajax...
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
10月28日-11月4日,3W携手青云QingCloud、UCloud、金山云、AWS等云服务提供商,为北京、深圳、武汉、福州四地的中小企业技术人员带来云技术应用的专业知识与技能分享。
然后通过4章来详细讲解ExtJS的基本功能,包括:最常用的表单、面板和布局类,常用的工具类与函数,以及ExtJS对事件的响应。本书还结合现今流行的Web框架进行改造,将相关技术融合起来应用。Ajax已经逐渐渗透到Web...
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
包含各种类型的extjs小图标,Extjs4小图标