extjs是因为在公司用到一次,也是公司唯一一个extjs的项目,当时拿到这个需求的时候,我有点懵逼,这他妈的什么鬼,参加工作两年不到的纯小白,没办法,这是工作,必须要完成的.硬着头皮做吧,好在最后弄完了,整理一下文档,方便以后学习.
/** *服务说明模板store */ Ext.define('ProductApp.goodsDescription', { // extend:'Ext.app.Application', extend : 'common.AppEx', name : 'goodsDescription',// 为应用程序起一个名字,相当于命名空间 controllers : [// 声明所用到的控制层 'GoodsDescriptionCtrl' ], paths:{ goodsReference:'product/app' }, appFolder : 'product/app',// 加载对象类的跟路径 launch : function() {// 开始 var mainView = Ext.create('Ext.container.Container', { layout : 'fit', items : [{ xtype : 'goodsDescriptionMainView' }] }); this.addToContainer(mainView); } });
/** *服务说明模板store */ Ext.define('ProductApp.goodsDescription', { // extend:'Ext.app.Application', extend : 'common.AppEx', name : 'goodsDescription',// 为应用程序起一个名字,相当于命名空间 controllers : [// 声明所用到的控制层 'GoodsDescriptionCtrl' ], paths:{ goodsReference:'product/app' }, appFolder : 'product/app',// 加载对象类的跟路径 launch : function() {// 开始 var mainView = Ext.create('Ext.container.Container', { layout : 'fit', items : [{ xtype : 'goodsDescriptionMainView' }] }); this.addToContainer(mainView); } });
/** *服务说明模板store */ Ext.define('ProductApp.goodsDescription', { // extend:'Ext.app.Application', extend : 'common.AppEx', name : 'goodsDescription',// 为应用程序起一个名字,相当于命名空间 controllers : [// 声明所用到的控制层 'GoodsDescriptionCtrl' ], paths:{ goodsReference:'product/app' }, appFolder : 'product/app',// 加载对象类的跟路径 launch : function() {// 开始 var mainView = Ext.create('Ext.container.Container', { layout : 'fit', items : [{ xtype : 'goodsDescriptionMainView' }] }); this.addToContainer(mainView); } });
Ext.define('goodsDescription.model.GoodsDescriptionModel', { extend: 'Ext.data.Model', fields: [ //服务说明及描述的ModelClunm {name:'serviceDescriptionId',mapping:'serviceDescriptionId'}, {name:'labelName',mapping:'labelName'}, {name:'labelIcon',mapping:'labelIcon'}, {name:'labelDescription',mapping:'labelDescription'}, {name:'sortNum',mapping:'sortNum'}, {name:'productId',mapping:'productId'}, {name:'isDefault',mapping:'isDefault'}, {name:'fileName',mapping:'fileName' } ] });
/**
* 服务说明属性页面总的页面
*/
Ext.define('goodsDescription.view.goodsdescription.GoodsDescriptionMainView',{
extend:'Ext.panel.Panel',
alias : 'widget.goodsDescriptionMainView',
// title : '代码维护列表',
layout: {
type:'vbox',
align:'stretch'
},
frame:false,
defaults: {
split: true
},
items:[
{
tbar : [
{
xtype : 'button',
text : '添加服务说明',
action : 'addColumns',
icon : 'resources/images/add.jpg'
},'-', {
xtype : 'button',
text : '批量删除',
action : 'deleteGoodsDescription',
icon : 'resources/images/delete.jpg'
},'-',{
xtype : 'button',
text : '保存',
action : 'saveGoodsDescription',
icon : 'resources/images/filesave.png'
}
],
xtype:'goodsDescriptionGrid',
flex:1
}
],
});
/** * 服务说明属性页面总的页面 */ Ext.define('goodsDescription.view.goodsdescription.GoodsDescriptionMainView',{ extend:'Ext.panel.Panel', alias : 'widget.goodsDescriptionMainView', // title : '代码维护列表', layout: { type:'vbox', align:'stretch' }, frame:false, defaults: { split: true }, items:[ { tbar : [ { xtype : 'button', text : '添加服务说明', action : 'addColumns', icon : 'resources/images/add.jpg' },'-', { xtype : 'button', text : '批量删除', action : 'deleteGoodsDescription', icon : 'resources/images/delete.jpg' },'-',{ xtype : 'button', text : '保存', action : 'saveGoodsDescription', icon : 'resources/images/filesave.png' } ], xtype:'goodsDescriptionGrid', flex:1 } ], });
/** * 上传服务说明图片窗口 */ Ext.define('goodsDescription.view.goodsdescription.GoodsDescImgAddWin', { extend: 'Ext.window.Window', alias: 'widget.goodsDescImgAddWin', height: 150, width: 400, title: '上传图片', closeAction: 'hide', modal:true, layout: 'fit', initComponent: function() { Ext.apply(this, { buttons: [{ text: '上传', action: 'preview' }, { text: '退出', scope: this, handler: this.close }], items: [{ xtype:'form', itemId:'goodsDescImgForm', layout: { type: 'hbox', padding:'5', align:'middle' }, items:[{ xtype: 'filefield', itemId: 'goodsDescImg', emptyText: 'Select an image', name: 'photo', width:250, buttonText: '浏览...', margin: '0 5 0 0', regex :/\.(?:jpg|png|bmp|gif|jpeg)\b/i },{ xtype: 'hiddenfield', itemId: 'rowNo', name: 'rowNo', }] }] }); this.callParent(arguments); } });
/** * 商品属性列表 */ Ext.require([ 'Ext.selection.CellModel' ]); var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }); var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { clicksToMoveEditor: 1, autoCancel: false }); var gridForm = new Ext.FormPanel({ id: 'goodsDescInfo', applyTo:Ext.getBody(), frame: false, hidden:true, autoHeight:true, labelAlign: 'left', bodyStyle:'padding:0px', width: 0, items:[{ xtype: 'fieldset', labelWidth: 150, title:'加载grid信息内容', defaultType: 'textfield', autoHeight: true, items:[{ fieldLabel: 'photo', name :'goodsDescImg', }] }] }); Ext.define('goodsDescription.view.goodsdescription.GoodsDescriptionGrid' ,{ extend: 'Ext.grid.Panel', alias : 'widget.goodsDescriptionGrid', store: 'GoodsDescriptionStore', // xtype : 'grid', // id : 'grid_jglb', // frame : true, // region : 'center', // columnLines : true, // loadMask : true, // viewConfig : { // forceFit : true, // scrollOffset : 0 // }, // anchor : '100%', columns: [ { xtype:'actioncolumn', header:'操作', width:50, id:'goodsDescGridDelAction', items: [{ icon: 'resources/images/delete.jpg', tooltip: '删除', }], handler: function(grid, rowIndex, colIndex, item) { var rec = grid.getStore().getAt(rowIndex); this.fireEvent('delClick', { serviceDescriptionId: rec.get('serviceDescriptionId') }); } }, {header: '排序',dataIndex:'sortNum',width:80,align:'center',sortable : true,editable : false, field: { xtype: 'numberfield', allowBlank: false, minValue: 1, maxValue: 100000 } }, {header: '标签名称',dataIndex:'labelName',width:150,align:'center',sortable : true,editable : false, field: { xtype: 'textfield', maxLength:30, allowBlank: false, maxLengthText :"最多可输入30个字符" } }, {header: '标签描述',dataIndex: 'labelDescription',width:150,align:'center',sortable : true,editable : false, field: { xtype: 'textfield', allowBlank: false, maxLength:250, maxLengthText :"最多可输入250个字符" } },{ header:'图片', dataIndex: 'labelIcon', width:100, editable : false, align:'center',sortable : true, renderer:function(value,cellmeta,record,rowIndex,columnIndex,stroe){ // var returnStr = "<img id='img"+rowIndex+"' src='"+value+"'>"; // var returnStr = "<img id='img" + rowIndex + "' class='imgIconProduct' src='"+ value + "'>"; // return returnStr; if (value == null || value == ''){ return"<img id='img" + rowIndex + "' class='imgIconProduct' src=' '>"; }else{ return"<img id='img" + rowIndex + "' class='imgIconProduct' src='" + value + "'>"; } } },{ xtype:'actioncolumn', header:'上传', width:50, id:'goodsDescGridUploadAction', items: [{ icon: 'resources/images/shangchuan.png', tooltip: '上传', }], handler: function(grid, rowIndex, colIndex, item) { this.fireEvent('uploadClick', { rowIndex : rowIndex }); } } ], selType: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, listeners: { edit: function(){ // refresh summaries //this.getSysCodeGrid().refresh(); } } }) ], viewConfig : { forceFit : false, enableRowBody : true, getRowClass :function(record, rowIndex, p, ds) { var cls = 'blue-row'; switch (rowIndex) { case 1: // 把第2行设置为红色 cls = 'background: red' break; } return cls; } } , initComponent:function(){ Ext.apply(this,{ selModel :Ext.create('Ext.selection.CheckboxModel',{mode:'MULTI'}), dockedItems:[ { dock: 'bottom', xtype: 'pagingtoolbar', store: 'GoodsDescriptionStore', pageSize: 15, displayInfo: true, displayMsg: '显示 {0} - {1} 条,共计 {2} 条', emptyMsg: '没有数据' } ]}); this.callParent(arguments); } }); /** * 根据显示方式ID获取显示方式描述 * @return {String} */ function showViewWayByID(viewWayID){ return 'ccc' ; } //Ext.getCmp("grid_jglb").getStore().on('load',setTdCls);//设置表格加载数据完毕后,更改表格TD样式为垂直居中 //function setTdCls(){ // var gridJglb=document.getElementById("grid_jglb"); // var tables = gridJglb.getElementsByTagName("table");//找到每个表格 // for(var k = 0; k < tables.length; k++){ // var tableV=tables[k]; // if(tableV.className=="x-grid3-row-table"){ // var trs=tables[k].getElementsByTagName("tr");//找到每个tr // for(var i = 0;i < trs.length;i++){ // var tds=trs[i].getElementsByTagName("td");//找到每个TD // for(var j = 1;j<tds.length;j++){ // tds[j].style.cssText="width:202px;text-align:center;line-height:130px;vertical-align:center;"; // } // } // }; // } // }
package com.founder.product.action; import java.io.File; import java.text.SimpleDateFormat; import java.util.Collection; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper; import com.founder.common.BaseAction; import com.founder.common.QueryResult; import com.founder.kindeditor.action.KindEditor; import com.founder.product.model.GoodsDescription; import com.founder.product.model.ProductList; import com.founder.product.service.GoodsDescriptionService; import com.founder.sys.model.EcParams; import com.founder.sys.model.SysCode; import com.founder.sys.service.CodeService; import com.founder.sys.service.SystemService; import com.founder.util.DateUtil; import com.founder.util.Upload; import com.founder.util.UploadGoodsDescription; public class GoodsDescriptionAction extends BaseAction{ private static final long serialVersionUID = 1L; private GoodsDescriptionService goodsDescriptionService; private CodeService codeService; private File photo; private String photoFileName; private String photoContentType; String dateStr = new SimpleDateFormat("yyyyMMdd").format(new Date()); String uploaded = "upload/gs/"+dateStr; String detailUploaded = "upload/detail"; private SystemService systemService; public CodeService getCodeService() { return codeService; } public void setCodeService(CodeService codeService) { this.codeService = codeService; } public File getPhoto() { return photo; } public void setPhoto(File photo) { this.photo = photo; } public String getPhotoFileName() { return photoFileName; } public void setPhotoFileName(String photoFileName) { this.photoFileName = photoFileName; } public String getPhotoContentType() { return photoContentType; } public void setPhotoContentType(String photoContentType) { this.photoContentType = photoContentType; } public String getDateStr() { return dateStr; } public void setDateStr(String dateStr) { this.dateStr = dateStr; } public String getUploaded() { return uploaded; } public void setUploaded(String uploaded) { this.uploaded = uploaded; } public String getDetailUploaded() { return detailUploaded; } public void setDetailUploaded(String detailUploaded) { this.detailUploaded = detailUploaded; } public SystemService getSystemService() { return systemService; } public void setSystemService(SystemService systemService) { this.systemService = systemService; } @Override public void getAll() { List<GoodsDescription> goodsDescription=goodsDescriptionService.getAll(); List list=goodsDescriptionService.getProList(goodsDescription); this.doJSONResponse(list); } /** * 引入相关的Service */ public GoodsDescriptionService getGoodsDescriptionService() { return goodsDescriptionService; } public void setGoodsDescriptionService( GoodsDescriptionService goodsDescriptionService) { this.goodsDescriptionService = goodsDescriptionService; } /** * 查询服务说明模板 */ public void queryAllGoodsDesription() { try { String curr_page = getRequest().getParameter("page") ; Map<String, Object> queryParam = new HashMap<String, Object>(); queryParam.put(QueryResult.CURR_PAGE, curr_page); queryParam.put(QueryResult.PAGE_SIZE, page_size); queryParam.put(QueryResult.SORT_FIELD, sort_field == null ? "SORT_NUM" : sort_field); queryParam.put(QueryResult.SORT_BY, "asc"); queryResult = (QueryResult) goodsDescriptionService.queryForPage(new QueryResult(queryParam)); entites = queryResult.getList(); int total = Integer.parseInt(queryResult.getProperties().get("total_row").toString()); this.doJSONPageResponse(entites,total) ; } catch (Exception e) { e.printStackTrace(); } } /** * 添加 模板服务说明 */ public void saveGoodsDesription()throws Exception{ Integer currentUserId = (Integer)getRequest().getSession().getAttribute("userId"); String currentTime = DateUtil.getCurrentDateString(); GoodsDescription gd=new GoodsDescription(); if("".equals(this.getRequest().getParameter("serviceDescriptionId"))){ gd.setLabelName(this.getRequest().getParameter("labelName")); gd.setLabelDescription(this.getRequest().getParameter("labelDescription")); if(this.getRequest().getParameter("sortNum").length()!=0){ gd.setSortNum(Integer.parseInt(this.getRequest().getParameter("sortNum"))); }else{ gd.setSortNum(null); } gd.setLabelIcon(this.getRequest().getParameter("labelIcon")); gd.setIsDefault("Y"); gd.setIsDelete("N"); gd.setAddUserId(currentUserId); gd.setAddTime(currentTime); int result= goodsDescriptionService.insert(gd); this.printResult(result); }else{ gd.setLabelName(this.getRequest().getParameter("labelName")); gd.setLabelDescription(this.getRequest().getParameter("labelDescription")); gd.setSortNum(Integer.parseInt(this.getRequest().getParameter("sortNum"))); gd.setLabelIcon(this.getRequest().getParameter("labelIcon")); gd.setIsDefault("Y"); gd.setIsDelete("N"); gd.setAddUserId(currentUserId); gd.setAddTime(currentTime); int result= goodsDescriptionService.updateGoodsDescription(gd); this.printResult(result); } } /** * 删除模板服务说明 */ public void deleteGoodsDesription() throws Exception{ String [] serviceDescriptionId = this.getRequest().getParameterValues("serviceDescriptionId") ; for(int i=0;i<serviceDescriptionId.length;i++){ if(serviceDescriptionId[i].length()!=0){ int result = goodsDescriptionService.delete(serviceDescriptionId[i]) ; this.printResult(result) ; } } } /** * 图片临时保存和预览 */ public void preview() throws Exception { UploadGoodsDescription upload = new UploadGoodsDescription(photo, photoFileName, photoContentType); HttpServletRequest request =this.getRequest(); EcParams ec = systemService.getDatailParams(); String realUpload =""; String s =KindEditor.getDescUpConfig("max_upload_limit"); long maxSize = Long.parseLong(s); MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request; Collection errList = wrapper.getErrors(); this.getResponse().setContentType("text/html; charset=utf-8"); if((long)upload.getPhoto().length() > maxSize){ this.getResponse().getWriter().print( "{success:\"false\",msg:\"上传失败,图片大小超过限制!\"}"); } else { String fileName = upload.myUpLoad(this.getResponse(), this.getRequest(), uploaded,true,ec); if (!"".equals(fileName) && fileName != null) { this.getResponse().getWriter().print( "{success:\"true\",msg:\"/" + fileName + "\"}"); } else { this.getResponse().getWriter().print( "{success:\"false\",msg:\"上传图片不符合规则,请上传长度和宽度仅等于 45*45 PX的图片!\"}"); } } } }
package com.founder.product.service.impl; import java.util.List; import com.founder.common.BaseServiceImpl; import com.founder.common.QueryResult; import com.founder.product.dao.GoodsDescriptionDao; import com.founder.product.model.GoodsDescription; import com.founder.product.service.GoodsDescriptionService; import com.founder.sys.model.SysCode; public class GoodsDescriptionServiceImpl extends BaseServiceImpl implements GoodsDescriptionService{ GoodsDescriptionDao goodsDescriptionDao; public GoodsDescriptionDao getGoodsDescriptionDao() { return goodsDescriptionDao; } public void setGoodsDescriptionDao(GoodsDescriptionDao goodsDescriptionDao) { this.goodsDescriptionDao = goodsDescriptionDao; } @Override public List getProList(List<GoodsDescription> goodsDescription) { try { return goodsDescriptionDao.getAll(); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; } /** * 查询服务说明并进行分页 */ public QueryResult queryForPage(QueryResult queryResult) { try { queryResult.calculate(goodsDescriptionDao.queryTotalNum(queryResult .getParam())); queryResult.setList(goodsDescriptionDao.queryForPage(queryResult .getParam())); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return queryResult; } public int insert( GoodsDescription gd){ return goodsDescriptionDao.insert(gd); } @Override public int updateGoodsDescription(GoodsDescription gd) throws Exception{ try{ return goodsDescriptionDao.updateGoodsDescription(gd); }catch (Exception e){ e.printStackTrace(); throw e; } } /** * 删除服务说明模板 */ @Override public int delete(String[] serviceDescriptionId) throws Exception { try { goodsDescriptionDao.delete(serviceDescriptionId) ; return 1 ; } catch (Exception e) { e.printStackTrace(); throw e; } } /** * 删除服务说明模板 */ @Override public int delete(String serviceDescriptionId) throws Exception{ // TODO Auto-generated method stub try { goodsDescriptionDao.delete(serviceDescriptionId) ; return 1 ; } catch (Exception e) { e.printStackTrace(); throw e; } } }
package com.founder.product.dao; import java.util.List; import java.util.Map; import com.founder.common.BaseDao; import com.founder.product.model.GoodsDescription; public interface GoodsDescriptionDao extends BaseDao,java.io.Serializable { @SuppressWarnings("unchecked") public Integer queryTotalNum(Map map) throws Exception; @SuppressWarnings("unchecked") public List<GoodsDescription> queryForPage(Map map) throws Exception; public int insert(GoodsDescription gd); public int updateGoodsDescription(GoodsDescription gd); public void delete(String[] serviceDescriptionId); public void delete(String serviceDescriptionId) throws Exception; }
"?> .dtd" > <sqlMap namespace="goods_description"> <!--服务说明模板 --> <resultMap class="goodsDescription" id="productServiceDescriptionMap"> <result column="service_description_id" property="serviceDescriptionId"/> <result column="label_name" property="labelName"/> <result column="label_icon" property="labelIcon"/> <result column="label_description" property="labelDescription"/> <result column="sort_num" property="sortNum"/> <result column="product_id" property="productId"/> <result column="is_default" property="isDefault"/> </resultMap> <!-- 分页查询服务说明模板sql --> <select id="query_for_page" parameterClass="map" resultMap="productServiceDescriptionMap"> select * from (select rownum row_id, a.* from ( select rownum r,psd.* from product_service_description psd and psd.is_delete='N' and psd.is_default='Y' <isNotNull property="sort_field"> order by $order_by$ </isNotNull> ) a ) </select> <!-- 查询分页服务说明数量 --> <select id="query_total_num" parameterClass="map" resultClass="java.lang.Integer"> select count(*) from product_service_description psd and psd.is_delete = 'N' and psd.is_default='Y' </select> <!-- 新增 --> <insert id="insert" parameterClass="goodsDescription"> <selectKey resultClass="int" keyProperty="serviceDescriptionId" > SELECT goods_description_SEQ.nextval AS service_description_id from dual </selectKey> insert into product_service_description ( service_description_id, label_name, label_icon, label_description, sort_num, product_id, is_default, is_delete, ADD_TIME, ADD_USER_ID, EDIT_TIME, EDIT_USER_ID) values ( #serviceDescriptionId#, #labelName#, #labelIcon#, #labelDescription#, nvl (#sortNum#, ( FROM product_service_description) ), <!--#sortNum#,--> #productId#, #isDefault#, 'N', #addTime#, #addUserId#, #editTime#, #editUserId# ) </insert> <!-- 删除商品属性 --> <update id="deleteGoodsDescription" parameterClass="java.lang.Integer"> update product_service_description set IS_DELETE='Y' where service_description_id=#value# </update> <!--更新 --> <update id="updateGoodsDescription" parameterClass="goodsDescription"> update product_service_description <dynamic prepend="set"> <isNotNull prepend="," property="labelName"> label_name = #labelName# </isNotNull> <isNotNull prepend="," property="labelIcon"> label_icon = #labelIcon# </isNotNull> <isNotNull prepend="," property="labelDescription"> label_description = #labelDescription# </isNotNull> <isNotNull prepend="," property="sortNum"> sort_num = #sortNum# </isNotNull> <isNotNull prepend="," property="productId"> product_id = #productId# </isNotNull> <isNotNull prepend="," property="isDelete"> IS_DELETE = #isDelete# </isNotNull> <isNotNull prepend="," property="isDefault"> IS_DEFAULT= #isDefault# </isNotNull> <isNotNull prepend="," property="addTime"> ADD_TIME = #addTime# </isNotNull> <isNotNull prepend="," property="addUserId"> ADD_USER_ID = #addUserId# </isNotNull> <isNotNull prepend="," property="editTime"> EDIT_TIME = #editTime# </isNotNull> <isNotNull prepend="," property="editUserId"> EDIT_USER_ID = #editUserId# </isNotNull> </dynamic> where service_description_id= #serviceDescriptionId# </update> </sqlMap>