ext js 自定义表签

1.jsp文件

<%@page contentType="text/html; charset=utf-8"%>

<%@taglib prefix="ext" uri="/ext-tags"%>

<%@taglib prefix="app" uri="/app-tags"%>

<%@taglib prefix="s" uri="/struts-tags"%>

<ext:ui styles="../../ext-3.4.0/multiSelect.css">

<ext:script before="true"> 

   <%@include file="../../scripts/routeconfig/dateflowCfg.js"%>

   <%@include file="../../scripts/routeconfig/date.js"%>

   <%@include file="../../ext-3.4.0/multiSelect.js"%>

   <%@include file="uploadForBatchForm.jsp"%>

</ext:script> 

    <ext:viewport layout="border"> 

<ext:items>

            <ext:panel region="center" layout="border" frame="true">

                <ext:tbar>

   <app:isPermission action="/routeconfig/findDateflowCfgByParam.action">

    <ext:button cls="x-btn-text-icon" text="${app:i18n('search')}" icon="../images/search.gif" handler="onSearch"/>

   <ext:separator/>

   </app:isPermission>

                    <app:isPermission action="/routeconfig/addDateflowCfg.action">

                   <ext:button var="btnAdd" cls="x-btn-text-icon" text="${app:i18n('add')}" icon="../images/add.gif" handler="onAdd"/>

                   <ext:separator/>

               </app:isPermission>

               <app:isPermission action="/routeconfig/editDateflowCfg.action">

                   <ext:button var="btnEdit" cls="x-btn-text-icon" text="${app:i18n('edit')}" icon="../images/edit.gif" handler="onEdit"/>

                   <ext:separator/> 

                    </app:isPermission>

                    <app:isPermission action="/routeconfig/deleteDateflowCfg.action">

                   <ext:button var="btnDelete" cls="x-btn-text-icon" text="${app:i18n('delete')}" icon="../images/delete.gif" handler="onDelete"/>

               <ext:separator/>

               </app:isPermission>

            <app:isPermission action="/routeconfig/uploadDateflowCfgTpl.action">

<ext:button cls="x-btn-text-icon" text="${app:i18n('import')}" icon="../images/export.gif" handler="onImport" />

</app:isPermission>

<app:isPermission action="/routeconfig/exportDateflowCfgData.action">

 <ext:button cls="x-btn-text-icon" text="${app:i18n('export')}" icon="../images/export.gif" handler="onExport"/>

</app:isPermission>

                </ext:tbar>

                

<ext:items>

<ext:panel hidden="true" layout="auto">

<ext:html>

<iframe style="display: none" id="download_DateflowCfg_frame"

name='download_DateflowCfg_frame' />

</ext:html>

</ext:panel>

 

                    <ext:formPanel var="queryView" region="north" autoHeight="true" frame="true" labelWidth="90" labelAlign="right">

                        <ext:items>

                            <ext:fieldSet layout="column" title="${app:i18n('queryCondition')}">

                                <ext:items>

                                    <ext:panel border="0" frame="false" width="220" layout="form">

                                        <ext:items>

                                            <ext:comboBox fieldLabel="${app:i18n('weightAreaCfg.produceType')}"

width="100" hiddenName="query_produceType" triggerAction="all"

editable="false" mode="local" displayField="value" var="query_produceType"

valueField="key" value="all" store="produceTypeStore" allowBlank="true"/>

                                        </ext:items>

                                    </ext:panel>

                                    

                                     <ext:panel border="0" frame="false" width="220" layout="form">

               <ext:items>

                    <ext:comboBox fieldLabel="${app:i18n('weightAreaCfg.areaType')}"

width="100" hiddenName="query_areaType" triggerAction="all"

editable="false" mode="local" displayField="value" var="query_areaType"

valueField="key" value="all" store="areaTypeStore" allowBlank="true"/>

</ext:items>

</ext:panel>

 

                                </ext:items>

                            </ext:fieldSet>

                        </ext:items>

                    </ext:formPanel>

                    

                    <ext:gridPanel var="gridView" region="center" frame="false" border="false"  >

                        <ext:store var="gridStore" url="findDateflowCfgByParam.action" listeners="{datachanged:dateFlowCfgStoreChanged}">

                            <ext:jsonReader totalProperty="totalSize" root="dateflowCfgs">

                                <ext:fields type="com.sf.module.routeconfig.domain.DateflowCfg"/>  

                            </ext:jsonReader>

                        </ext:store>

                        <ext:pagingToolbar var="pagingBar" store="gridStore" pageSize="20" displayInfo="true" />

                        <ext:checkboxSelectionModel />

                        <ext:columnModel>

<ext:propertyColumnModel dataIndex="produceType" header="${app:i18n('dateFlowCfg.produceType')}" width="100" align="left" renderer="convertproduceTypeStore">

</ext:propertyColumnModel>

<ext:propertyColumnModel dataIndex="srcCity" header="${app:i18n('dateFlowCfg.srcCity')}" width="80" align="center">

</ext:propertyColumnModel>

<ext:propertyColumnModel dataIndex="destCity" header="${app:i18n('dateFlowCfg.destCity')}" width="80" align="center">

</ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="areaType" header="${app:i18n('dateFlowCfg.areaType')}" width="80" align="center" renderer="convertareaTypeStore">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="extraTime" header="${app:i18n('dateFlowCfg.extraTime')}" width="80" align="center">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="cfgType"  header="${app:i18n('dateFlowCfg.cfgType')}" width="100" align="center" renderer="convertcfgTypeStore">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="validDate"  header="${app:i18n('dateFlowCfg.validDate')}" width="100" align="center" format="Y-m-d" renderer="dateRenderer">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="expiryDate"  header="${app:i18n('dateFlowCfg.expiryDate')}" width="100" align="center" format="Y-m-d" renderer="dateRenderer">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="appStartDate"  header="${app:i18n('dateFlowCfg.appStartDate')}" width="100" align="center" format="Y-m-d" renderer="dateRenderer">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="appEndDate"  header="${app:i18n('dateFlowCfg.appEndDate')}" width="100" align="center" format="Y-m-d" renderer="dateRenderer">

                            </ext:propertyColumnModel>

                            <ext:propertyColumnModel dataIndex="remark"  header="${app:i18n('dateFlowCfg.remark')}" width="100" align="center" >

                            </ext:propertyColumnModel>

                        </ext:columnModel>

                    </ext:gridPanel>  

                </ext:items>

            </ext:panel>

</ext:items>

</ext:viewport> 

 

<ext:window var="addOrEditWindow" closeAction="hide" width="350" height="380" resizable="false" constrainHeader="true" layout="border" modal="true" plain="true"  isEditing="false">

<ext:tbar>

<ext:button cls="x-btn-text-icon" icon="${images}/save.gif"  text="${app:i18n('save')}" handler="onSave" />

<ext:button cls="x-btn-text-icon" icon="${images}/reset.gif" text="${app:i18n('reset')}" handler="onRecordReset" />  

</ext:tbar>

<ext:items>

<ext:formPanel var="addOrEditForm" region="center" border="0" frame="true" labelAlign="right" labelWidth="140">

<ext:items>

<ext:panel layout="column">

<ext:items>

<ext:hidden name="dateFlowId"  id="dateFlowId"/>

<ext:panel width="300" layout="form">

<ext:items>

new Ext.form.MultiSelect({

name:"${app:i18n('dateFlowCfg.produceType')}",

hiddenName:"produceType",

id:"edit_departBatchLevel",

fieldLabel:"${app:i18n('dateFlowCfg.produceType')}",

store:produceTypeStore,

mode:'local',

width:130,

triggerAction:'all',

hideTrigger:false,

allowBlank:false,

displayField:'value',

valueField:'key',

value:'T1',

editable:false

}) 

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

<ext:textField name="srcCity" var="srcCity" fieldLabel="${app:i18n('dateFlowCfg.srcCity')}" width="130" msgTarget="side" allowBlank="true" regex="/^[0-9,，]+$/"/>

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

<ext:textField name="destCity" var="destCity" fieldLabel="${app:i18n('dateFlowCfg.destCity')}" width="130" msgTarget="side" allowBlank="true" regex="/^[0-9,，]+$/" />

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

<ext:comboBox fieldLabel="${app:i18n('dateFlowCfg.areaType')}"

width="130" hiddenName="areaType" triggerAction="all"

editable="false" mode="local" displayField="value" var="areaType"

valueField="key" value="sameCity" store="areaTypeStore" allowBlank="false"/>

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

<ext:textField name="extraTime" var="extraTime" fieldLabel="${app:i18n('dateFlowCfg.extraTime')}" width="130" msgTarget="side" allowBlank="false" />

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

   <ext:comboBox fieldLabel="${app:i18n('dateFlowCfg.cfgType')}"

width="130" hiddenName="cfgType" triggerAction="all"

editable="false" mode="local" displayField="value" var="cfgType"

valueField="key" value="0" store="cfgTypeStore" allowBlank="false"/>

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

  new Ext.form.DateField({allowBlank:false,width:130,name:"validDate",id:"validDate", 

minValue:GetDateStr(), 

format:"Y-m-d",itemId:"validDate",

fieldLabel:"${app:i18n('dateFlowCfg.validDate')}",editable:false,showToday:false})

</ext:items>  

</ext:panel>

<ext:panel width="300" layout="form">

<ext:items>

   new Ext.form.DateField({allowBlank:true,width:130,name:"expiryDate",id:"expiryDate", 

minValue:GetMinDateStr(), 

format:"Y-m-d",itemId:"expiryDate",

fieldLabel:"${app:i18n('dateFlowCfg.expiryDate')}",editable:false,showToday:false})

</ext:items>  

</ext:panel> 

<ext:panel width="300" layout="form">

<ext:items>

   new Ext.form.DateField({allowBlank:true,width:130,name:"appStartDate",id:"appStartDate", 

minValue:GetDateStr(), 

format:"Y-m-d",itemId:"appStartDate",

fieldLabel:"${app:i18n('dateFlowCfg.appStartDate')}",editable:false,showToday:false})

</ext:items>  

</ext:panel> 

<ext:panel width="300" layout="form">

<ext:items>

   new Ext.form.DateField({allowBlank:true,width:130,name:"appEndDate",id:"appEndDate", 

minValue:GetMinDateStr(), 

format:"Y-m-d",itemId:"appEndDate",

fieldLabel:"${app:i18n('dateFlowCfg.appEndDate')}",editable:false,showToday:false})

</ext:items>  

</ext:panel> 

<ext:panel width="300" layout="form">

<ext:items>

<ext:textField name="remark" var="remark" fieldLabel="${app:i18n('dateFlowCfg.remark')}" width="130" msgTarget="side" allowBlank="false" emptyText="配置类型解释说明" listeners="{onmouseover:updateValue}"/>

</ext:items>

</ext:panel>

<ext:hidden name="createTime" id="createTime"/>

<ext:hidden name="createEmp"  id="createEmp"/>

</ext:items>  

</ext:panel> 

</ext:items>

</ext:formPanel>

</ext:items>

 </ext:window>

 

</ext:ui>

2.js

//产品类型

var produceTypeStore=new Ext.data.Store({

    reader : new Ext.data.JsonReader({

        idProperty : 'key',

        fields : [ {

            name : 'key',

            type : 'String'

        }, {

            name : 'value',

            type : 'String'

        } ]

    }),

    data : [  {

        key : 'all',

        value : "${app:i18n('weightAreaCfg.all')}"

    }, {

        key : 'T1',

        value : "${app:i18n('weightAreaCfg.produceMainLine')}"

    },{

        key : 'T8',

        value : "${app:i18n('weightAreaCfg.produceRick')}"

    },{

        key : 'T4',

        value : "${app:i18n('weightAreaCfg.produceNextDay')}"

    },{

        key : 'SP4',

        value : "${app:i18n('weightAreaCfg.produceLand')}"

    },{

        key : 'T6',

        value : "${app:i18n('weightAreaCfg.produceAlternateDay')}"

    }]

});

 

//区域类型

var areaTypeStore = new Ext.data.Store({

    reader : new Ext.data.JsonReader({

        idProperty : 'key',

        fields : [ {

            name : 'key',

            type : 'String'

        }, {

            name : 'value',

            type : 'String'

        } ]

    }),

    data : [  {

        key : 'all',

        value : "${app:i18n('weightAreaCfg.all')}"

    }, {

        key : 'sameCity',

        value : "${app:i18n('weightAreaCfg.areaTc')}"

    },{

        key : 'sameProvince',

        value : "${app:i18n('weightAreaCfg.areaSn')}"

    },{

        key : 'corssProvince',

        value : "${app:i18n('weightAreaCfg.areaSw')}" 

    }]

});

 

//配置类型

var cfgTypeStore=new Ext.data.Store({

    reader : new Ext.data.JsonReader({

        idProperty : 'key',

        fields : [ {

            name : 'key',

            type : 'String'

        }, {

            name : 'value',

            type : 'String'

        } ]

    }),

    data : [  {

        key : 0,

        value : "${app:i18n('dateFlowCfg.specialDate')}"

    },{

        key : 1,

        value : "${app:i18n('dateFlowCfg.holiday')}"

    } ]

});

 

/**

 * 查询按钮事件

 */

function onSearch() {

Ext.Msg.wait('${app:i18n('waitingMessage')}');

gridView.getStore().baseParams = queryView.getForm().getValues();

pagingBar.pageSize = 20;

gridView.getStore().baseParams["limit"] = pagingBar.pageSize; 

gridView.getStore().load({callback: searchCallback}); 

}

 

/**

 * 查询回调函数

 */

function searchCallback(r,options,success){

Ext.Msg.hide();

if (success == true) {

 

} else {

Ext.Msg.alert('${app:i18n('prompt')}', '${app:i18n('searchFailure')}');

}

}

 

/**

 * 新增

 */

function onAdd() {

addOrEditWindow.isEditing=false; 

Ext.getCmp("edit_departBatchLevel").setReadOnly(false);

addOrEditWindow.dateflowCfg = null;

addOrEditWindow.setTitle("${app:i18n('add')}");

addOrEditWindow.show();  

addOrEditForm.getForm().reset();

}

 

//点击修改按钮，设置表格可编辑修改

function onEdit() {

     var recs=gridView.getSelectionModel().getSelections();

if (recs.length !=1) {

Ext.Msg.alert("${app:i18n('prompt')}","${app:i18n('selectOneRecord')}");

return;

 }

addOrEditWindow.isEditing = true;

Ext.getCmp("edit_departBatchLevel").setReadOnly(true);

addOrEditWindow.dateflowCfg=recs[0];

addOrEditWindow.setTitle("${app:i18n('edit')}"); 

addOrEditWindow.show();

onRecordReset();

}

 

/**

 * 删除事件

 */

function onDelete() {

var recs = gridView.getSelectionModel().getSelections();

if (recs == null || recs.length < 1) {

   Ext.Msg.alert("${app:i18n('prompt')}", "${app:i18n('selectOneRecord')}");

   return;

}

var ids = "";

    for ( var i = 0; i < recs.length; ++i) {

        var ue = recs[i];

        if (ids.length > 0) {

            ids += ',';

        }

        ids += ue.get('dateFlowId');

    }

    Ext.Msg.confirm("${app:i18n('prompt')}", "${app:i18n('confirmDeleteData')}", function(e) {

        if (e == 'yes') {

            var wb = Ext.Msg.wait("${app:i18n('waitingMessage')}");

            Ext.Ajax.request({

                url : 'deleteDateflowCfg.action',

                params : {ids : ids},

                callback : function(o, s, r) {

                    wb.hide();

                    if (s) {

                        var resp = Ext.util.JSON.decode(r.responseText);

                        if (resp.success) {

                            onSearch();

                            Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('deleteSuccess')}");

                        } else {

                            Ext.MessageBox.alert("${app:i18n('prompt')}", resp.msg);

                        }

                    } else

                        Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('deleteFailure')}");

                }

            });

        }

    });

}

 

/**

 * 保存事件

 */

function onSave(){

if(!addOrEditForm.getForm().isValid()){

return;

}

// 异步校验网点有效性

var paramVal = {};

var vals = addOrEditForm.getForm().getValues();

for ( var keyTmp in vals) {

paramVal["dateflowCfg." + keyTmp] = vals[keyTmp].replace(/\s+/g,"");

}

saveOrUpdate(paramVal); 

/*Ext.Ajax.request({

url: 'checkZoneAndCityCode.action',

params : paramVal,

async: false,     

success: function (response) {

var result = Ext.util.JSON.decode(response.responseText);

if(result.success){

 if(result.msg!='success'){

Ext.MessageBox.alert("${app:i18n('prompt')}", result.msg);

return;

 }else{// 保存

saveOrUpdate(paramVal); 

 }

}else{

  Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('prompt.exception')}");

  return;

}

},

failure:function (){

  Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('prompt.exception')}");

  return;

}

});*/ 

}

 

/**

 * 保存配置信息

 */

function saveOrUpdate(paramVal){

var url="addDateflowCfg.action";// 新增

if(addOrEditWindow.isEditing){

url="editDateflowCfg.action";// 修改

}

   Ext.Ajax.request({

        url : url,

        params : paramVal,

        success : function(response) {

        var resp = Ext.util.JSON.decode(response.responseText);

            if (resp.success) {

                onSearch();

                addOrEditWindow.hide(); 

                Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('saveSuccess')}");

            }else{

                if(resp.msg=='fail'){

                   Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('validDateError')}");

                }else{

                   Ext.MessageBox.alert("${app:i18n('prompt')}","${app:i18n('saveFailure')}"); 

                }

            }

        },

        failure:function(response){

            if(Ext.util.JSON.encode(response.status) == 0) {

          Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('prompt.connection.exception')}");

       }else{

          Ext.MessageBox.alert("${app:i18n('prompt')}", "${app:i18n('prompt.exception')}");

       }

        }

    });

}

 

/**

 * 重置

 */

function onRecordReset(){

addOrEditForm.getForm().reset();

if (addOrEditWindow.isEditing && addOrEditWindow.dateflowCfg != null) {

addOrEditForm.getForm().loadRecord(addOrEditWindow.dateflowCfg);

}

}

 

//把输入框的值变成大写

function updateValue(textField) {

textField.setValue("");

}

 

//导入

function onImport() {

uploadForBatchView.setTitle("${app:i18n('dateFlowCfg.import')}");

uploadForBatchView.show();

setAllowedExtensions("xls");

resetUploadForBatchView();

setModelFileName("${app:i18n('dateFlowCfg.importModel')}");

}

 

//执行完上传后查询结果

uploadSuccessCall = doSearch;

function doSearch(){

gridStore.load({callback:function (r, options, success) {

if (!success) {

Ext.Msg.alert("${app:i18n('prompt')}", gridStore.reader.jsonData.msg);

}

}});

}

 

//下载模板

function getDownloadActionUrl() {

return "downloadDateflowCfgTpl.action"; 

}

 

//上传

function getUploadActionUrl() {

return "uploadDateflowCfgTpl.action";

}

 

//导出

function onExport(){

    var timerID = null;

var wb = Ext.Msg.wait("${app:i18n('exporting')}", "${app:i18n('prompt')}");

// 3秒后关闭，以免重复点击

timerID = setTimeout(function () {

timerID = null;

wb.hide();

}, 5000);

var iframe = document.getElementById("download_DateflowCfg_frame");

var url = "exportDateflowCfgData.action?" + encodeURI(encodeURI(queryView.getForm().getValues(true)));

iframe.src = url;

}

 

//日期渲染器

function dateRenderer(v,m,r){

  if (v == null)

    return null;

  var me = this;

  return v.format(me.format);

}

 

//初始化生效日期

function GetDateStr(){

   var date = new Date();

   date.setUTCDate((date.getUTCDate()+1));

   return date;

}

 

//失效日期

function GetMinDateStr(){

   var date = new Date();

   date.setUTCDate((date.getUTCDate()+2)); 

   return date;

}

 

function dateFlowCfgStoreChanged(store){

   var rec, len = store.getCount();

    for ( var idx = 0; idx < len; idx++) {

        rec = store.getAt(idx);

        rec.data["validDate"] = Date.parseDate(rec.get("validDate"), "Y-m-dTH:i:s");

        rec.data["expiryDate"] = Date.parseDate(rec.get("expiryDate"), "Y-m-dTH:i:s");

        rec.data["appStartDate"] = Date.parseDate(rec.get("appStartDate"), "Y-m-dTH:i:s");

        rec.data["appEndDate"] = Date.parseDate(rec.get("appEndDate"), "Y-m-dTH:i:s"); 

    }

}

 

//日期渲染器

function dateRenderer(v,m,r){

  if (v == null)

    return null;

  var me = this;

  return v.format(me.format);

}

 

//产品

function convertproduceTypeStore(v){

if(v == null){

return "";

}

return levelRenderer(produceTypeStore,v);

}

//区域

function convertareaTypeStore(v){

    if(v == null){

return "";

}

return levelRenderer(areaTypeStore,v);

}

//配置类型

function convertcfgTypeStore(v){

    if(v == null){

return "";

}

return levelRenderer(cfgTypeStore,v); 

}

 

//通过定义的数据源来取国际化的value的值

function levelRenderer(store,key) {

   if (key == null || key == '') {

        return '';

   }

   return store.getById(key)==null?"":store.getById(key).get('value');