- 浏览: 242006 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
sweed0:
为何每一段代码都重复一次呢?
spring注解实例二 -
Gary_Huangpf:
- - 插件报错啊
Ext前台分页 -
ddvk2007:
版主 我想請問你所說的mapreduce是hadoop的還是g ...
MapReduce中的Shuffle和Sort分析 -
人可木:
好问章,楼主写的相当详细。。。多谢。。。
findbugs插件的安装与应用 -
hautbbs:
按照博主的方法启动调试出现jvm terminated.Ex ...
10分钟学会使用MyEclipse断点调试js
前台:
var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'订货会编码',width:120,dataIndex:'dhhCommonId'}, {header:'订货会名称',width:200,dataIndex:'dhhName'}, {header:'供货月',width:120,dataIndex:'supplymonth'}, {header:'供货段',width:120,dataIndex:'supplysection'}, {header:'供货日',width:120,dataIndex:'supplydate'}, {header:'创建时间',width:180,dataIndex:'createdate'}, {header:'创建人',width:120,dataIndex:'createuser'} ]); // 默认情况下列是可排序的 cm.defaultSortable = true; var store = new Ext.data.JsonStore({ url:'../../om/supplySection.do?method=findPageSupplySection', totalProperty:'totalProperty', root:'root', fields:[ {name: 'ssJavaid'}, {name: 'dhhCommonId'}, {name: 'dhhName'}, {name: 'supplymonth'}, {name: 'supplysection'}, {name: 'supplydate'}, {name: 'createdate'}, {name: 'createuser'} ] }); var orderColumnGrid = new Ext.grid.GridPanel({ height:370, bodyStyle:'width:100%;',//宽度用了样式的写法 stripeRows:true,//隔行换色 loadMask: {msg:'正在加载数据,请稍侯……'}, store:store, cm: cm, sm:sm, bbar: new Ext.PagingToolbar({ plugins:new Ext.ux.Andrie.pPageSize(), //列表显示多少行 pageSize:10, store: store, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }) }); store.load({params:{start:0,limit:10}});
其中,store是从后台获得json串的,在列表的最后要加上store.load({params:{start:0,limit:10}});触发store调URL获得json串数据,当然store的写法很多这个不多说。
json串格式:
如
:{totalProperty:100,root:[{id:0,name:’name0’,descon:’descon0’},{id:1,name:’name1’,descon:’descon1’},{id:2,name:’name2’,descon:’descon2’}] }
“totalProperty”是列表总条数,跟store的totalProperty:'totalProperty'单引号的那个名字一样就行了,又如:store里totalProperty:'total'单引号里的名字改为'total',则json串为"]:{total:100,。。。,root同理。
plugins:
grid的bba多了一个rplugins:new Ext.ux.Andrie.pPageSize(), //列表显示多少行
这是一个下拉框,功能是“每页显示多少行”且支持分页,是我从网上DOWN的资源。使用: 引用<script type="text/javascript" src="../../resources/js/pPageSize.js"></script>(路径自己改),然后在bbar里加上就行了,附件在最后附上。
后台:
关于分页的后台代码不多说,说一下分页需要的参数,向后台传入的参数为:start、limit,分别表示从第start条开始,查询limit条数据,当点击下一页的时候start会随之变化。
返回时的代码:
response.setContentType("text/json;charset=utf-8"); response.getWriter().write(str);
其中str是你拼好的json串,格式在上面已经提到了。
2.列表Ext.grid.GridPanel增删查改
2.1增加
定义
var tbars = ['->',// 右对齐 '-', { text : '<img src="../../resources/images/img/add.gif"/>新增', tooltip : '新增订货分段记录', handler : addOrderColumn }, '-'];
在GridPanel里加入一行tbar:tbars,
这样在列表的表头上面就会出现一个“新增”按钮,新增调用一个funciont函数,所有funciont中用到的组件都写在方法里,打开和关闭时利于创建、销毁,
代码:
var addOrderColumn = function() { // 弹出窗口的按钮集合 var orderColumnButtons = [{ xtype : 'submit', text : '保存', handler : function() { if(orderColumnForm.getForm().isValid()){ //新增时判断供货段截止月不小于开始月 if(Ext.get('ssStartDate').getValue() > Ext.get('ssEndDate').getValue()){ Ext.MessageBox.alert("友情提示", "[供货段开始月]应小于等于[供货段截止月]!"); return false; } orderColumnForm.getForm().submit({ url:'../../om/supplySection.do', params:{method:'saveSupplySection'}, method:'post', waitMsg:'正在保存,请稍等...', success:function(form,action){ orderColumnWindow.destroy(); Ext.Msg.alert("友情提示","保存目标成功!", function(){ store.reload(); },this ); }, failure:function(form,action){ Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试!"); } }); } } }, { text : '取消', handler : function() { orderColumnWindow.destroy(); } }]; var dhhStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url:'../../om/oM.do?method=findAllOMs' }), reader : new Ext.data.JsonReader({ root : 'root' },[ {name : 'javaid',mapping : 'javaid'}, {name : 'omName',mapping : 'omName'} ]) }); // 订货会名称 var dhhmc = new Ext.form.ComboBox({ fieldLabel : '订货会', hiddenName:'javaid', autoDestroy : true, store : dhhStore, valueField : 'javaid', displayField : 'omName', typeAhead : true, mode : 'local', triggerAction : 'all', emptyText : '请选择订货会', selectOnFocus : true, forceSelection:true, editable : true, width : widthValue }); dhhStore.load(); // 订货会组表单 var orderColumnForm = new Ext.FormPanel({ // title: '经销商开户申请及提交', bodyStyle : 'padding:5px', frame : true, layoutOnTabChange : true, autoHeight : true, autoWidth : true, labelWidth : 150, labelAlign : 'right', items : [dhhmc,{ xtype : 'datefield', fieldLabel : '供货段开始月', name : 'ssStartDate', emptyText : 'YYYY-MM', format: 'Y-m', allowBlank:false, width : 150 },{ xtype : 'datefield', fieldLabel : '供货段结束月', emptyText : 'YYYY-MM', format: 'Y-m', name : 'ssEndDate', allowBlank:false, width : 150 }], buttons : orderColumnButtons }); // 创建表单结束 // 将表单放到一个窗口中,并显示 var orderColumnWindow = new Ext.Window({ title : "订货会组信息表单", width : 400, height : 200, autoScroll : true, collapsible : true, maximizable : true, layout : 'fit', // plain:true, // bodyStyle:'padding:5px;', modal : true, items : orderColumnForm }); orderColumnWindow.show(); return orderColumnForm; };
如果新增的时候想要初始化一些数据的话
在“新增”按钮加上类似这样一段代码
handler : function() { var dhhId = selectDhhForm.form.findField('javaid').getValue(); var hqForm = addOrderColumn (); hqForm.load({ url : '../../om/dhhDate.do?method=initDhhDate&dhhId='+ dhhId, waitMsg : '正在载入数据,请稍等...', method:"get", success:function(form,action){}, failuer : function(){ Ext.Msg.alert('友情提示', '数据加载失败请重试!'); } }); }
即打开addOrderColumn 窗口时,给窗口里的字段赋值
增加时在后台用FormBean直接取值(哎,struts1),然后该保存就保存该变动就动动,值得一提的是,后台要返回成功或失败的json信息,前台接到成功的信息后销毁窗口orderColumnWindow.destroy();,然后刷新列表的数据store.reload();(参考保存按钮代码),界面不刷新不跳转很人性化。
2.2删除
在bbars里再加一个按钮
var tbars = ['->',// 右对齐
'-',
{
text : '<img src="../../resources/images/img/add.gif"/>新增',
tooltip : '新增订货分段记录',
handler : addOrderColumn
}, '-',{
text:'<img src="../../resources/images/img/delete.gif"/>删除',
tooltip : '删除订货分段记录',
handler : deleteSS
},'-'];
删除比增加相比要简单的多,在grid的store里有一个'ssJavaid',这个是显示列表时JSON串传进来的,虽然不在界面显示,但是每条记录已经有这个ID了,“修改”时会具体说到这点,删除时根据这个ID去后台删就行了。
var deleteSS = function(){ var record = sm.getSelected(); if(record&&sm.getCount()==1){ Ext.MessageBox.confirm('提示信息', '您确定要删除所选的记录吗?', function(buttonobj){ if(buttonobj=='yes'){ var myCon = new Ext.data.Connection(); waitMsg:'正在删除数据,请稍等...'; myCon.request({ url:'../../om/supplySection.do?method=deleteSupplySection&ssId=' + record.get('ssJavaid'), method:'post', waitMsg:'正在删除,请稍等...', successProperty:'success', success:function(transport){ Ext.Msg.alert("友情提示","成功删除数据!", function(){ store.reload(); },this ); }, failure:function(form,action){ Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试!"); } },this); } }); }else{ Ext.Msg.alert('友情提示','您必须选择一行数据以便进行办理!'); } };
- pPageSize.rar (1.7 KB)
- 下载次数: 25
发表评论
-
js原型
2012-07-26 09:12 854原型是个很微妙的东西,很多人不是很理解,理解了原型对于研究 ... -
一个基于jquery的banner轮播
2012-03-21 10:21 1370一个banner轮播广告。 JavaSc ... -
jquery要怎么写才能速度最快?(转)
2012-03-21 09:52 895很久没有关注jQuery了,最近重新看了一下,看到一些不错 ... -
HTTP协议详解(转载)
2012-02-18 19:17 0什么是HTTP协议 协议是指计算机通信网络中两台计算机 ... -
JavaScript 数组常用操作
2011-10-09 15:43 12291.创建数组只是声明了数组,并不包含具体数据。 Jav ... -
HTML便签大全
2011-08-25 11:19 10651.1 字体样式的应用 字体样式包括:字体族科(font- ... -
不同浏览器的Javascript兼容性总结
2011-08-20 12:56 2722对于大多数程序员而言在平时的编码过程中很少会注意到跨浏 ... -
javascript字符串编码
2011-07-18 15:05 824encodeURI() 函数可把字符串作为 URI 进行编 ... -
js最全的10种跨域解决方案
2011-07-15 09:08 845在客户端编程语言中,如javascript和Action ... -
js内置函数速查
2011-07-15 09:07 14981.document.write("" ... -
javascript优化
2011-07-15 08:55 791javaScript是一门解释性的语言、它不像java、C ... -
Ajax乱码
2011-05-14 14:09 1005使用GET方式提交数据的时候,中文问题很好解决,setRequ ... -
Ext实现添删查改二
2010-04-29 12:50 1136上一篇中提到了列表显示、增加、删除。这篇说下修改和条件查询。 ... -
Ext前台分页
2010-04-29 12:46 2068今天上午测试并实现了Ext的前台分页,参考了网上的资料,使用了 ... -
firebug的使用
2010-02-05 13:21 893什么是Firebug 从事了数 ... -
Ext学习资料大全
2010-02-04 08:47 1231轻松搞定 ExtJS http://download.csdn ... -
FireBug的安装与调试js快速入门
2010-02-03 19:47 3534Javascript的调试,是开 ... -
10分钟学会使用MyEclipse断点调试js
2010-02-03 10:11 4683最近老是被js代码所困扰,故撰此文: 1.在站点下准备 ...
相关推荐
自己做的ext增删查改demo ext3.1 ext2.2
一个完整的用户操作小系统。包含了会员的增加,删除,修改,搜索,查找。 使用了extjs和php完美结合。除了ext的js代码之外,还附带了php文件代码和数据库代码
一个Struts2+Ext+SQL Server 2000实例
EXT 增删改查的一个例子,通过它可以大至知道EXT的一些基本使用方法,对于初学者很有帮助
java+ext+数据库基础实现增删查改,学习用
Ext+ssh 实现增删改查小例子,最近用 Ext+Strut2+Spring2.5+Hibernate3.2写了一个小例子,适合初学者,希望更多的人能快速上手,如果觉得写得还行,请留言.
Ext实现的前台论坛开发,实现了版主、发帖、回帖、注册等常用功能。
JSP+Ext实现CURD
以前给某物流公司做的一个demo 用到了基本的增删查改功能 以及drag功能 由于ext.net dll太大 源码中不包含 请大家自己引用1.x版本的 Ext.Net.dll和Ext.Net.xml
ext实现动态
ext框架和ssh的整合,增删改查功能,ext3.4
Ext实现的拖拽树的测试例子,里面有不少页面,其中我的测试下的Default.aspx可以运行
使用ext和SQLServer做的一个简单的增删改查的项目,对学习ext的简单操作很有用
接下来 在mysql里建立 数据库位ext的库 再去项目中 src/META-INF/persistence.xml的配置文件里吧<!-- <property name="hibernate.hbm2ddl.auto" value="update" /> -->这句话的注释去掉 好了 部署项目到tomcat上 ...
简单的EXT 增删改查
mysql数据库 java MyEclipse做增删改查,前台jsp,后天java
Ext左树有表格 增删改查, 添加子节点,重命名
是一个gwt-ext学习的实例,有增删改查的功能。
本来想像petshop一样做多个DAL来执行不同的代码的,但使用NHibernate之后发现他就可以通过不同的配置来实现连接不同的数据库,原系统中的HSRK.DALAccess,HSRK.DALOracle也没有删除。但没有实现代码。 Access库就...