EXTjs的案例（一）

我把最近刚学的ext总结一下，方便自己以后查阅，大家有需要的也可以自己看。前面是一些基于4.0的用法，后面是工作中用到的案例基于3.0。

下面是一个登录页面的代码：（命名也不是很规范，因为当时着急出效果）

(function(){Ext.onReady(function() {var config = {  fields:['province','post'],  data:[['北京','10000'],['通县','101100'],['昌平','102200'],['大兴','102600'],  ['密云','101500'],['延庆','102100'],['顺义','101300'],['怀柔','101400']]  };var store = new Ext.data.SimpleStore(config); var addNewsForm= new Ext.FormPanel({id:'loginForm',height:130, labelAlign : 'right',//位置frame : true,defaultType : 'textfield',layout:'column',labelPad : 2,method : 'POST', bodyStyle:'padding:15px 0px 0px 10px',defaults:{msgTarget:'qtip',allowBlank:false,blankText:'不允许为空'},items :[{fieldLabel: "登陆账号",id:"userName",xtype:"textfield",name:"userName"},{inputType: "password",id:"password",xtype:"textfield",name:"password",fieldLabel: "登陆密码",blankText:'不允许为空'}, {id:"userid",xtype:"combobox",name:"userid",fieldLabel:"选择身份",displayField:'province',store:store },{id:"randCode",xtype:"textfield",name:"randCode",fieldLabel:"验证码",width: 170},{xtype: 'box',id:"box",autoEl: {tag: 'img',src: 'jsp/image.jsp',height:20},style: {margin: "0px 0 0 10px"}}]});var top= new Ext.FormPanel({id: 'loginLogo', height: 35, frame:true, bodyStyle:'padding-top:4px', html:'<h3><center>毕业设计a574258039</center></h3>' });var bottom= new Ext.FormPanel({id: 'bottomLogo', height: 35, frame:true, buttonAlign: 'center',buttons: [ { text : '重置',  id : 'clear',  iconCls : 'Exclamation',handler : reset}, { text: '登陆',iconCls : 'Housestar',handler : subjectForm} ]});
var mainpanel=new Ext.Panel({resizable:false,id:'mainpanel',  autoWidth:true,  frame:true,  height: 245,width: 300,labelAlign : 'center',region:'south',  items:[top,addNewsForm,bottom]
}); var win = new Ext.Window({resizable:false,height: 245,width: 310,frame:true, closable: false, modal:true,defaults : {           border : false},buttonAlign: 'center', items:[ { //columnWidth:1, items: Ext.getCmp("mainpanel") }/*   , { //columnWidth: 1, items: Ext.getCmp("loginForm") }, { //columnWidth: 1, items: Ext.getCmp("bottomLogo") }*/ ]});win.show();function subjectForm() { if (addNewsForm.getForm().isValid()) { addNewsForm.getForm().submit({ clientValidation: true,waitMsg : '正在努力登录......',  url : 'loginControler.do',mthod:'post',params: {method: 'loginCheck'},timeout : 3000,  success : function(form, action) { if (action.result.type == 0)// OP  window.location.href = 'index.jsp';  else  window.location.href = 'jsp/main.jsp';  },  failure : function(form, action) {form.reset();  if (action.failureType == Ext.form.Action.SERVER_INVALID)  Ext.MessageBox  .alert(  '警告',  action.result.errors.msg);  }  });                }  };function reset(){addNewsForm.form.reset();};});})();/* addNewsForm.getForm().submit({ clientValidation: true,waitMsg : '正在登录......',  url : 'test.do?method=test&userName='+Ext.getCmp('userName').getValue()+'&password='+Ext.getCmp('password').getValue()+'&userid='+Ext.getCmp('userid').getValue()+' &randCode='+Ext.getCmp('randCode').getValue(),mthod:'post',params: {userName: 'delivered'},//timeout : 3000,  success : function(form, action) { alert("aa");if (action.result.type == 0)// OP  window.location.href = 'success.jsp';  else  window.location.href = 'success.jsp';  },  failure : function(form, action) {alert("bb");form.reset();  if (action.failureType == Ext.form.Action.SERVER_INVALID)  Ext.MessageBox  .alert(  '警告',  action.result.errors.msg);  }  }); **addNewsForm.getForm().submit({url:"test.do?method=test",waitMsg:"添加中....",timeout :'3000',params: { "uid":uid },success:function(form,action){var res = action.result;if(res.success == 1){Ext.MessageBox.alert("提示框", res.msg);Ext.getCmp("ONoticeGrid").store.reload();Ext.getCmp("ggDisplayGridPanel").store.reload();window.close();return;}else{Ext.Msg.alert('提示',res.msg);return;}},failure:function(form,action){Ext.MessageBox.alert("提示框", "添加失败!");}});                ********/

效果图：

下面是总结的一些工作的：

个人觉得以后在布局等方面可以参考：

Ext.onReady(function(){Ext.Ajax.timeout = 900;//重修修改var devRecord = Ext.data.Record.create([    {name: 'usercode',mapping:'usercode'},{name: 'username',mapping:'username'}                   ]); var codeRecord = Ext.data.Record.create([    {name: 'codevalue',mapping:'codevalue'},{name: 'codename',mapping:'codename'}                   ]); var envRecord = Ext.data.Record.create([    {name: 'envcode',mapping:'envcode'},{name: 'envname',mapping:'envname'}                   ]);var spclStore = new Ext.data.Store({    //设定读取的地址autoLoad :true,proxy: new Ext.data.HttpProxy({url: 'get.action?type=s'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"code",totalProy:'results',root:'items',successProperty :'success'}, codeRecord),    remoteSort: true,listeners: {load: function() {var spclConfCombo = Ext.getCmp('spclConfCombo');spclConfCombo.setValue(spclConfCombo.getValue());}}   });var envStore = new Ext.data.Store({    //设定读取的地址//autoLoad :true,proxy: new Ext.data.HttpProxy({url: 'getCom.action?flag=te'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"en",totalProperty:'results',root:'items',successProperty :'success'}, envRecord),    remoteSort: true});var devStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getU.action?flag=al'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"usercode",totalProperty:'results',root:'items',successProperty :'success'}, devRecord),    remoteSort: true,listeners: {load: function() {devCombo.setValue(devCombo.getValue());}}   });var devCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'usercode',hiddenName:'devCombo',displayField:'username',editable:false,forceSelection:true,triggerAction:'all',allowBlank:true,store:devStore,typeAhead: true,width:90});var streamRecord = Ext.data.Record.create([{name: 'brhcode',mapping:'brhcode'},{name: 'brhname',mapping:'brhname'}//,{name: 'brhtype',mapping:'brhtype'},//{name: 'intview',mapping:'intview'},//{name: 'project',mapping:'project'}                 ]); var streamStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?flag=all&brhtype=dev'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"brhcode",totalProperty:'results',root:'items',successProperty :'success'}, streamRecord),    remoteSort: true,listeners: {load: function() {streamCombo.setValue(streamCombo.getValue());}}});var streamCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'brhcode',hiddenName:'streamCombo',displayField:'brhname',editable:false,//disabled:true,triggerAction:'all',allowBlank:true,store:streamStore,typeAhead: true,//mode:'local',width:200});var envCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'envcode',hiddenName:'envCombo',displayField:'envname',editable:false,triggerAction:'all',allowBlank:true,store:envStore,typeAhead: true,width:120,listWidth:120,listeners:{//'select':function(){//    streamCombo.enable();// streamStore.removeAll();//  streamCombo.disabled=(envCombo.getValue()==null);//  if(envCombo.getValue()==null){//      streamCombo.disable();//    }else{//        //streamStore.load({proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?flag=all&brhtype=dev&envcode'+envCombo.getValue()})});//     streamStore.load({params: {envcode:envCombo.getValue()}});//    }// streamCombo.setValue(null);//}}});//expand //创建工具栏组件var toolbar = new Ext.Toolbar(['-','测试环境:',envCombo,'-','开发流:',streamCombo,'-','开发人员:',devCombo,'-','活动号:',new Ext.form.TextField({name: 'actquery'})]);var toolbar2 = new Ext.Toolbar(['-',{text : '发布测试',iconCls:'complete',handler:deployToTest},'-']);var toolbar3 = new Ext.Toolbar(['-','   ',{text : '查询',iconCls:'query',handler:queryToDeploy},'    ','-']);//定义数据集对象var actStore = new Ext.data.GroupingStore({autoLoad :false,groupField:'envname',sortInfo:{field: 'makedate', direction: "ASC"},reader: new Ext.data.JsonReader({    id:"taskid",totalProperty:'results',root:'items',successProperty :'success'},Ext.data.Record.create([{name: 'plantime',mapping:'plantime'},{name: 'groupcode',mapping:'groupcode'},{name: 'groupname',mapping:'groupname'},{name: 'proposer',mapping:'proposer'},{name: 'proposername',mapping:'proposername'},{name: 'handdeploy',mapping:'handdeploy'},{name: 'testorder',mapping:'testorder'}//定义一个model和后台字段最好对应上])),proxy : new Ext.data.HttpProxy({url : 'QueryDeployTest.action'}),listeners : {'load' : function() {actGrid. getSelectionModel(). selectAll();}}})//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var actGrid = new Ext.grid.EditorGridPanel({applyTo : 'grid-div',frame:true,tbar : toolbar,bbar : toolbar2,store: actStore,clicksToEdit:1,//height: 480,width:1200,stripeRows : true,autoScroll : true,hideGroupedColumn:true,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : '行号',width : 40}),//表格行号组件cb,{header: "测试人", width: 60, dataIndex: 'testname', sortable: true},{header: "紧急发布", width: 60, dataIndex: 'urgeflagname', sortable: true,renderer : function(value, cellmeta, record) {return (value=="是")?('<span style="color:red;">'+value+'</span>'):value;}},{header: "描述", width: 80, dataIndex: 'content', sortable: true,<%--editor:new Ext.form.TextField({allowBlank : false}),--%>renderer:showDetail},{header: "备注", width: 80, dataIndex: 'remark', sortable: true,editor:new Ext.form.TextField({allowBlank : true}),renderer:showDetail},{header: "特殊设置", width: 70, dataIndex: 'spclconf', sortable: true,editor: new Ext.form.ComboBox({id:'spclConfCombo',selectOnFocus:true,valueField:'codevalue',hiddenName:'spclCombo',displayField:'codename',editable:false,forceSelection:false,triggerAction:'all',store:spclStore,typeAhead: true,width:80,listWidth:100}),renderer : function(value, cellmeta, record) {var index = spclStore.find(Ext.getCmp('spclConfCombo').valueField, value);var recordspcl = spclStore.getAt(index);var displayText = "";if (recordspcl == null) {displayText = value;}else {displayText = recordspcl.data.codename;}if(displayText != null && displayText !=""){displayText = '<span style="color:red;">' + displayText + '</span>';}return displayText;}},{header: "申请时间", width: 60, dataIndex: 'maketime', sortable: true},{header: "活动ID", width: 180, dataIndex: 'actid', sortable: true,renderer:showDetail}],view: new Ext.grid.GroupingView({//forceFit:true,hideGroupedColumn : true,groupByText:'使用当前字段进行分组',showGroupsText:'表格分组',groupTextTpl: '{text} ({[values.rs.length]} {["个活动待更新"]})'})   ,listeners: {   'render': function () {toolbar3.render(this.tbar); //add one tbar   }                } })//创建新增或修改书籍信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式actStore.load();function showDetail(value, meta, rec, rowIdx, colIdx, ds){return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';}function queryToDeploy(){var devPerson = devCombo.getValue();var devStream = streamCombo.getValue();var envQuery = envCombo.getValue();var actQuery = Ext.get('actquery').dom.value;var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在查询活动信息......',progress:true,wait:true,waitConfig:{interval:1000}});actStore.load({params:{UserCode:devPerson, BrhCode:devStream,envCode:envQuery,actQuery:actQuery},callback:function afterQuery(response,options, success){msgTip.hide();if(!success){Ext.MessageBox.alert("提示","没有待发布的活动！");actStore.removeAll();}}});}function deployToTest(){var acts = actGrid.getSelectionModel().getSelections();if(acts.length == 0){Ext.MessageBox.alert("提示","请选择待提交的活动！");return;}var changed = actStore.modified;var missed = false;Ext.each(changed, function(record) {var flag = true;    Ext.each(acts, function(item) {if(record.data.actid == item.data.actid){flag = false;}});if(flag){missed = true;}});if(missed){Ext.MessageBox.confirm('提示','有些记录您做了修改，但没有选择提交，是否继续？',function(id){if(id == 'yes'){deployActs();}});}else{deployActs();}}var msgTip=null;var deployReturn=false;function hideDeployProgress(){deployReturn=true;msgTip.hide();}function showDeployProgress(jsonData,first){if(first){msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在发布......',progress:true,wait:true,waitConfig:{interval:1000}});deployReturn=false;setTimeout(function(){showDeployProgress(jsonData)},1000)return ;}Ext.Ajax.request({url : 'getDeployProgress.action',params : {jsonData:jsonData},method : 'POST',success : function(response,options){var result = Ext.util.JSON.decode(response.responseText);if(deployReturn){}else if(result.busy){Ext.MessageBox.updateText(result.msg);setTimeout(function(){showDeployProgress(jsonData)},1000)}else{setTimeout(function(){showDeployProgress(jsonData)},1000);}}});}function deployActs(){var acts = actGrid.getSelectionModel().getSelections();var jsonData = "["; var appendRecordStrFn = function(record) {   record.data.indexNo = this.indexOf(record);   jsonData += Ext.encode(record.data) + ",";   };   Ext.each(acts , appendRecordStrFn, actStore);   jsonData += "]";Ext.Ajax.request({url : 'deployActs.action',params : {jsonData:jsonData},timeout: 300000,method : 'POST',success : function(response,options){hideDeployProgress();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg);for(var i = 0 ; i < acts.length ; i++){actStore.remove(acts[i]);}actStore.modified = [];},failure : function(response,options){hideDeployProgress();Ext.Msg.alert('提示','发布失败或超时，请联系管理员！');}});showDeployProgress(jsonData,true);}});

下面是又一个案例：

Ext.ux.OperateColumn = function(config){/*** @cfg 操作*/this.operates = [];/*** @cfg 行样式的class名称*/this.colStyle = 'grid3-operate-col';/*** @private 操作与处理函数映射*/this.operateHandler = {}; Ext.apply(this, config);if(!this.id){this.id = Ext.id();}this.renderer = this.renderer.createDelegate(this);
};Ext.ux.OperateColumn.prototype ={strTplImg : '<img class="{0}" op="{1}" ext:qtip="{2}" src="{3}"></img>',strTplText:'<span class ="{0}" op="{1}" style="{2}">{3}</span>',init : function(grid){this.grid = grid;this.grid.on('render', function(){var view = this.grid.getView();view.mainBody.on('click', this.onClick, this);}, this);},onClick : function(e, t){var op = t.getAttribute('op');if(this.operateHandler[op]){var index = this.grid.getView().findRowIndex(t);var record = this.grid.store.getAt(index);this.operateHandler[op](record);}},renderer : function(v, p, record){var ret = '';for(var i=0,len = this.operates.length;i < len; i++){this.operateHandler[this.operates[i]['type']] = this.operates[i]['handler'];if(this.operates[i].icon){ret = ret + String.format(this.strTplImg,this.colStyle,this.operates[i]['type'],this.operates[i]['qTips']||'',this.operates[i]['icon']);}else{ret = ret + String.format(this.strTplText,this.colStyle,this.operates[i]['type'],this.operates[i]['textStyle'],this.operates[i]['text']);}}return ret;}
};var Plant = Ext.data.Record.create([
{name: 'dbcode', type: 'string'},
{name: 'dbname', type: 'string'},
{name: 'username', type: 'string'},
{name: 'passwd', type: 'string'},
{name: 'sid', type: 'string'},
{name: 'ip', type: 'string'},
{name: 'port', type: 'int'}
]);Ext.onReady(function(){var opColumn = new Ext.ux.OperateColumn({header: "操作",dataIndex: 'id',//定义要映射的字段width: 80,align:'center',operates:[{type:'A',handler:function(record){Ext.MessageBox.show({   title:'请稍候',   msg:'正在保存数据，请耐心等待...',   progress:true});Ext.Ajax.request({url: "DbInfoModify.action",method: "POST",params:record.data,success: function(r) {Ext.MessageBox.hide();grid.store.reload();},failure: function() {Ext.MessageBox.hide();MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);grid.store.reload();}});},text: '保存',textStyle:'color:blue'},{type:'D',handler:function(record){if(record.data.dbcode==''){grid.store.remove(record);return ;}Ext.MessageBox.confirm('提示框', '您确定要删除该信息吗？删除后数据不能恢复！',function(btn){if(btn=='no')return ;Ext.MessageBox.show({   title:'请稍候',   msg:'正在删除数据，请耐心等待...',   progress:true});Ext.Ajax.request({url: "DeleteDbInfo.action",method: "POST",params:record.data,success: function(r) {Ext.MessageBox.hide();grid.store.remove(record);},failure: function() {Ext.MessageBox.hide();MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);}});  })},text:'删除',textStyle:'color:red'}]});var fm = Ext.form;var cm = new Ext.grid.ColumnModel([{id:'dbcode',header: "标识",dataIndex: 'dbcode',width: 100,editor: new fm.TextField({allowBlank: false})},{header: "库名",dataIndex: 'dbname',width: 120,editor: new fm.TextField({allowBlank: false})},{header: "用户名",dataIndex: 'username',width: 120,editor: new fm.TextField({allowBlank: false})},{header: "密码",dataIndex: 'passwd',width: 120,editor: new fm.TextField({allowBlank: false})},{header: "sid",dataIndex: 'sid',width: 80,editor: new fm.TextField({allowBlank: false})},{header: "IP",dataIndex: 'ip',width: 100,editor: new fm.TextField({allowBlank: false})},{header: "端口",dataIndex: 'port',width: 50,editor: new fm.NumberField({allowBlank: false})},opColumn]);
//  cm.defaultSortable = true;var mystore = new Ext.data.Store({   //autoLoad:true,//自动加载   proxy: new Ext.data.HttpProxy({   url:'getDbInfos.action?t=admin',   method:'GET'  }),   reader: new Ext.data.JsonReader({root: 'dbInfoList'  },Plant)   });   //alert("dd")var grid = new Ext.grid.EditorGridPanel({store: mystore,cm: cm,renderTo: 'grid-div',width:800,height:500,autoExpandColumn:'dbcode',frame:true,plugins:opColumn,clicksToEdit:1,tbar: ['-',{text: '增加',handler : function(){var p = new Plant({dbcode:'',dbname:'',username:'',passwd:'',sid:'',ip:'',port:'1521'});grid.stopEditing();mystore.insert(mystore.getTotalCount(), p);grid.startEditing(mystore.getTotalCount(), 0);}},'-',{text: '刷新',handler : function(){mystore.reload();}},'-',{text: 'test',handler : function(){alert(grid.store.getTotalCount()+"/"+mystore.getTotalCount())}},'-']});mystore.load();
});

图：

3.各种不同的用法就是为了方便以后自己学习：

Ext.onReady(function(){var devPerson = '<%=tUsercode%>';var streamRecord = Ext.data.Record.create([{name: 'brhcode'},{name: 'brhname'},{name: 'brhtype'},{name: 'project'},{name: 'devview'},{name: 'intbrh'},{name: 'intview'},{name: 'evn'},{name: 'rebase'}                 ]); var streamStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?brhtype=dev&flag=mine'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"brhcode",totalProperty:'results',root:'items',successProperty :'success'}, streamRecord),    remoteSort: true,listeners: {load: function() {streamCombo.setValue(streamCombo.getValue());}} });var streamCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'brhcode',hiddenName:'streamCombo',displayField:'brhname',fieldLabel: '开发流',blankText:'请选择开发流',emptyText:'请选择开发流',editable:false,triggerAction:'all',allowBlank:true,store:streamStore,typeAhead: true,width:200});streamStore.load();//streamCombo.setValue('lisind_dev');//创建工具栏组件var toolbar = new Ext.Toolbar(['-','开始日期:',new Ext.form.DateField({id:'beginDate',format:'Y-m-d',//显示日期的格式width : 120,value : new Date()}),'-','结束日期:',new Ext.form.DateField({id:'endDate',format:'Y-m-d',//显示日期的格式width : 120,value : new Date()}),'-','活动号:',new Ext.form.TextField({name: 'actquery'})//,'-',//{text : '查询',iconCls:'query',handler:queryToCreate}]);var toolbar2 = new Ext.Toolbar(['-','开发流:',streamCombo,'-',{text : '创建活动',iconCls:'complete',handler:createActs},'-',{xtype: 'tbspacer'},'-','活动号:',new Ext.form.TextField({name: 'actCreate'}),'-',{text : '快速创建活动',iconCls:'complete',handler:quickCreate}]);var toolbar3 = new Ext.Toolbar(['-','   ',{text : '  查询  ',iconCls:'query',handler:queryToCreate},'    ','-']);//定义数据集对象var actStore = new Ext.data.Store({autoLoad :false,//sortInfo :{field: "makedate", direction: "DESC"},reader: new Ext.data.JsonReader({    id:"actno",totalProperty:'results',root:'items',successProperty :'success'},Ext.data.Record.create([{name: 'actno',mapping:'actno'},{name: 'upactno',mapping:'upactno'},{name: 'modulecode',mapping:'modulecode'},{name: 'modulename',mapping:'modulename'},{name: 'testcode',mapping:'testcode'},{name: 'testname',mapping:'testname'},{name: 'makedate',mapping:'makedate'},{name: 'maketime',mapping:'maketime'},{name: 'remark',mapping:'remark'},{name: 'judger',mapping:'judger'},{name: 'judgername',mapping:'judgername'},{name: 'judgetime',mapping:'judgetime'},{name: 'content',mapping:'content'}])),proxy : new Ext.data.HttpProxy({url : 'getActsToCreate.action'})})//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var actGrid = new Ext.grid.GridPanel({applyTo : 'grid-div',frame:true,tbar : toolbar,//bbar : toolbar2,bbar : new Ext.PagingToolbar({//分页工具栏store : actStore,pageSize : 12,displayInfo : true,displayMsg : '第 {0} 条到 {1} 条，一共 {2} 条',emptyMsg : "没有记录"}),store: actStore,stripeRows : true,autoScroll : true,width:860,//height: 500,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : '行号',width : 40}),//表格行号组件cb,{header: "活", width: 130, dataIndex: 'actno', sortable: true,renderer:showDetail},{header: "上动号", width: 130, dataIndex: 'upactno', sortable: true,renderer:showDetail},{header: "评", width: 100, dataIndex: 'judgername', sortable: true},{header: "时间", width: 120, dataIndex: 'judgetime', sortable: true,renderer:showDetail}],   listeners: {   'render': function () {   toolbar2.render(this.bbar); //add one tbar   toolbar3.render(this.tbar);      }   }  })//创建新增或修改书籍信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式function showDetail(value, meta, rec, rowIdx, colIdx, ds){return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';}function queryToCreate(){var beginDate = Ext.get('beginDate').dom.value;var endDate = Ext.get('endDate').dom.value;var actQuery = Ext.get('actquery').dom.value;if(beginDate > endDate){Ext.MessageBox.alert("提示","开始日期不能大于结束日期！");return;}var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在查询活动信息......',progress:true,wait:true,waitConfig:{interval:1000}});actStore.baseParams = {beginDate:beginDate, endDate:endDate,actQuery:actQuery,caller:'ActCreate'};  actStore.load({params:{start:0,limit:12},callback:function afterQuery(response,options, success){msgTip.hide();if(!success){Ext.MessageBox.alert("提示","没有可使用的活动号，您可能需要修改查询条件！");actStore.removeAll();}}});}function createActs(){var stream = streamCombo.getValue();var acts = actGrid.getSelectionModel().getSelections();if(stream == null || stream == ""){Ext.MessageBox.alert("提示","请选择开发流！");return;}if(acts.length == 0){Ext.MessageBox.alert("提示","请选择活动！");return;}if(acts.length > 5){Ext.MessageBox.alert("提示","请一次最多选5个活动！");return;}var jsonData = "["; var appendRecordStrFn = function(record) {   record.data.indexNo = this.indexOf(record);   jsonData += Ext.encode(record.data) + ",";   };   Ext.each(acts , appendRecordStrFn, actStore);   jsonData += "]";var index = streamStore.find('brhcode',stream);var proj;if(index != -1){proj = streamStore.getAt(index).get('project');}var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在创建活动......',progress:true,wait:true,waitConfig:{interval:1000}});Ext.Ajax.request({url : 'createActs.action',params : {brhCode:stream,devPerson:devPerson,jsonData:jsonData,project:proj},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg);for(var i = 0 ; i < acts.length ; i++){actStore.remove(acts[i]);}},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','创建活动失败，可能号码已被占用！');}});}function quickCreate(){var stream = streamCombo.getValue();var act = Ext.get('actCreate').dom.value;if(stream == null || stream == ""){Ext.MessageBox.alert("提示","请选择开发流！");return;}var fn = function(){Ext.get('actCreate').focus();};if(act == null || act == ""){Ext.MessageBox.alert("提示","请填写活动号！",fn);return;}var index = streamStore.find('brhcode',stream);var proj;if(index != -1){proj = streamStore.getAt(index).get('project');}var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在创建活动......',progress:true,wait:true,waitConfig:{interval:1000}});Ext.Ajax.request({url : 'createActs.action',params : {brhCode:stream,devPerson:devPerson,act:act,project:proj},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg);},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','创建活动失败，可能号码已被占用！');}});}});

图：

4.案例

Ext.onReady(function(){var devPerson = '<%=tUsercode%>';var devStream = 'allbrh';var devRecord = Ext.data.Record.create([    {name: 'usercode',mapping:'usercode'},{name: 'username',mapping:'username'}                   ]); var codeRecord = Ext.data.Record.create([    {name: 'codevalue',mapping:'codevalue'},{name: 'codename',mapping:'codename'}                   ]); var envRecord = Ext.data.Record.create([    {name: 'envcode',mapping:'envcode'},{name: 'envname',mapping:'envname'}                   ]);var spclStore = new Ext.data.Store({    //设定读取的地址//autoLoad :true,proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?type=spclconf'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"codevalue",totalProperty:'results',root:'items',successProperty :'success'}, codeRecord),    remoteSort: true});var envStore = new Ext.data.Store({    //设定读取的地址//autoLoad :true,proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"envcode",totalProperty:'results',root:'items',successProperty :'success'}, envRecord),    remoteSort: true});var devStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getUserList.action?flag=all&role=dev'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"usercode",totalProperty:'results',root:'items',successProperty :'success'}, devRecord),    remoteSort: true,listeners: {load: function() {devCombo.setValue(devCombo.getValue());}}   });var devCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'usercode',hiddenName:'devCombo',displayField:'username',blankText:'请选择开发人员',emptyText:'请选择开发人员',editable:false,forceSelection:true,triggerAction:'all',allowBlank:false,store:devStore,typeAhead: true,width:90});devStore.load();devCombo.setValue(devPerson);var streamRecord = Ext.data.Record.create([{name: 'brhcode',mapping:'brhcode'},{name: 'brhname',mapping:'brhname'}//,{name: 'brhtype',mapping:'brhtype'},//{name: 'intview',mapping:'intview'},//{name: 'project',mapping:'project'}                 ]); var streamStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?flag=all&brhtype=dev'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"brhcode",totalProperty:'results',root:'items',successProperty :'success'}, streamRecord),    remoteSort: true,listeners: {load: function() {streamCombo.setValue(streamCombo.getValue());}}});var streamCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'brhcode',hiddenName:'streamCombo',displayField:'brhname',blankText:'请选择开发流',emptyText:'请选择开发流',editable:false,triggerAction:'all',allowBlank:false,store:streamStore,typeAhead: true,width:200});streamStore.load();streamCombo.setValue(devStream);//创建工具栏组件var toolbar = new Ext.Toolbar(['-','开发人员:',devCombo,'-','开发流:',streamCombo,'-','活动号:',new Ext.form.TextField({id:'actquery',name: 'actquery'})]);var toolbar2 = new Ext.Toolbar(['-',{text : '提交测试',iconCls:'complete',handler:commitToTest},'-',{xtype: 'tbspacer'},{xtype: 'tbspacer'},'-','活动号:',new Ext.form.TextField({name: 'actCreate'}),'-',{text : '快速提交测试',iconCls:'complete',handler:commitAct}]);var toolbar3 = new Ext.Toolbar(['-','   ',{id:'queryActsBrn',text : '查询',iconCls:'query',handler:queryToTest},'    ','-','        ','-','<font color=blue><注意：如需同时更新数据修改等环境，请不要写在备注里，而在"申请发布测试"菜单中提交.></font>','-']);//定义数据集对象var actStore = new Ext.data.GroupingStore({autoLoad :false,groupField:'brhname',sortInfo:{field: 'actno', direction: "ASC"},reader: new Ext.data.JsonReader({    id:"actid",totalProperty:'results',root:'items',successProperty :'success'},Ext.data.Record.create([{name: 'actid',mapping:'actid'},{name: 'brhcode',mapping:'brhcode'},{name: 'brhname',mapping:'brhname'},{name: 'actno',mapping:'actno'},{name: 'devcode',mapping:'devcode'},{name: 'devname',mapping:'devname'},{name: 'modulecode',mapping:'modulecode'},//缺字段{name: 'syncenvname',mapping:'syncenvname'},{name: 'urgeflag',mapping:'urgeflag'}//,{name: 'priorty'},//{name: 'priortyname'}])),proxy : new Ext.data.HttpProxy({url : 'getActToTestList.action'})})var urgeflagRecord = Ext.data.Record.create([{name: 'codevalue',mapping:'codevalue'},{name: 'codename',mapping:'codename'}]); var urgeflagStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?type=urgeflag'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"codevalue",totalProperty:'results',root:'items',successProperty :'success'}, codeRecord),    //urgeflagRecordremoteSort: true});//urgeflagStore.load();//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var actGrid = new Ext.grid.EditorGridPanel({applyTo : 'grid-div',frame:true,tbar : toolbar,bbar : toolbar2,store: actStore,clicksToEdit:1,//height: 480,width:860,stripeRows : true,autoScroll : true,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : '行号',width : 40}),//表格行号组件cb,{header: "活动号", width: 100,dataIndex: 'actno', sortable: true,renderer:showDetail},{header: "块", width: 70, dataIndex: 'modulename', sortable: true,renderer:showDetail},{header: "描", width: 120, dataIndex: 'content', sortable: true,editor:new Ext.form.TextField({allowBlank : true,readOnly:true}),renderer:showDetail},{header: "备", width: 80, dataIndex: 'remark', sortable: true,editor:new Ext.form.TextField({allowBlank : false}),renderer:showDetail},{header: "置", width: 80, dataIndex: 'spclconf', sortable: true,editor: new Ext.form.ComboBox({id:'spclConfCombo',selectOnFocus:true,valueField:'codevalue',hiddenName:'spclCombo',displayField:'codename',editable:false,forceSelection:false,triggerAction:'all',store:spclStore,typeAhead: true,width:80}),renderer : function(value, cellmeta, record) {var index = spclStore.find(Ext.getCmp('spclConfCombo').valueField, value);var recordspcl = spclStore.getAt(index);var displayText = "";if (recordspcl == null) {displayText = value;}else {displayText = recordspcl.data.codename;}return displayText;}},{header: "紧布", width: 80, dataIndex: 'urgeflag', sortable: true,editor: new Ext.form.ComboBox({id:'urgeflagCombo',selectOnFocus:true,valueField:'codevalue',hiddenName:'urgeflag',displayField:'codename',editable:false,forceSelection:false,triggerAction:'all',store:urgeflagStore,typeAhead: true,width:80}),renderer : function(value, cellmeta, record) {var index = urgeflagStore.find(Ext.getCmp('urgeflagCombo').valueField, value);var recordspcl = urgeflagStore.getAt(index);var displayText = "";if (recordspcl == null) {displayText = value;}else {displayText = recordspcl.data.codename;}return displayText;}},
//
//              {header: "同", width: 150, dataIndex: 'syncenv', sortable: true
//                  ,editor: new Ext.form.MultiSelect({
//                        width:200,
//                        editable: false,
//                        store:envStore ,
//                        readData:function(){
//                          envStore.baseParams = {flag:'syncenv',type:"all"};//lisind_dev
//                           envStore.load();
//                        },
//                        valueField :"envcode",
//                        displayField: "envname",
//                        mode: 'local',
//                        triggerAction: 'all',
//                        allowBlank:true,
//                        emptyText:'无'
//                  })
//              },{header: "员", width: 70, dataIndex: 'devname', sortable: true},{header: "共和国", width: 60, dataIndex: 'testname', sortable: true},{header: "豆腐干流", width: 80, dataIndex: 'brhname', sortable: true}],view: new Ext.grid.GroupingView({//forceFit:true,hideGroupedColumn:true,groupByText:'使用当前字段进行分组',showGroupsText:'表格分组',groupTextTpl: '{text} ({[values.rs.length]} {["个活动未交付"]})'}),   listeners: {   'render': function () {   toolbar3.render(this.tbar); //add one tbar   }   } })//创建新增或修改书籍信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式function showDetail(value, meta, rec, rowIdx, colIdx, ds){return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';}function queryToTest(){devPerson = devCombo.getValue();devStream = streamCombo.getValue();var actQuery = Ext.get('actquery').dom.value;var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在加载活动信息......',progress:true,wait:true,waitConfig:{interval:1000}});var index = streamStore.find('brhcode',devStream);var proj,intview;if(index != -1){proj = streamStore.getAt(index).get('project');intview = streamStore.getAt(index).get('intview');if(devStream == "allbrh"){proj = "lis";}}actStore.load({params:{UserCode:devPerson, BrhCode:devStream,//Project:proj,intview:intview,actQuery:actQuery},callback:function afterQuery(response,options, success){msgTip.hide();if(!success){Ext.MessageBox.alert("提示","没有数据！");actStore.removeAll();}}});}function commitToTest(){var acts = actGrid.getSelectionModel().getSelections();if(acts.length == 0){Ext.MessageBox.alert("提示","请选择待提交的活动！");return;}var str = "";for(var i=0;i <acts.length;i++){ str = acts[i].get('remark');if(str== null || str ==""){Ext.MessageBox.alert("提示","您选择待提交活动的备注信息不能为空！");return;}}var changed = actStore.modified;var missed = false;Ext.each(changed, function(record) {var flag = true;   Ext.each(acts, function(item) {if(record.data.actid == item.data.actid){flag = false;}});if(flag){missed = true;}});if(missed){Ext.MessageBox.confirm('提示','有些记录您做了修改，但没有选择提交，是否继续？',function(id){if(id == 'yes'){commitActs();}});}else{commitActs();}}function commitActs(){var proposer = '<%=tUsercode%>';var acts = actGrid.getSelectionModel().getSelections();var jsonData = "["; var appendRecordStrFn = function(record) {   record.data.indexNo = this.indexOf(record);   jsonData += Ext.encode(record.data) + ",";   };   Ext.each(acts , appendRecordStrFn, actStore);   jsonData += "]";var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在创建活动......',progress:true,wait:true,waitConfig:{interval:1000}});Ext.Ajax.request({url : 'commitActs.action',params : {proposer:proposer,jsonData:jsonData},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg,function(){if(!result.success){actStore.removeAll();queryToTest();}else{for(var i = 0 ; i < acts.length ; i++){actStore.remove(acts[i]);}}actStore.modified = [];});},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','提交失败，请联系管理员！');}});}function commitAct(){var proposer = '<%=tUsercode%>';var act = Ext.get('actCreate').dom.value;var fn = function(){Ext.get('actCreate').focus();};if(act == null || act == ""){Ext.MessageBox.alert("提示","请填写活动号！",fn);return;}var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在提交活动......',progress:true,wait:true,waitConfig:{interval:1000}});Ext.Ajax.request({url : 'commitActs.action',params : {proposer:proposer,act:act},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg);},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','提交失败，请联系管理员！');}});}});

图：

案例：

Ext.onReady(function(){var devPerson = 'all';var testPerson = 'all';var chgtestPerson =  '<%=tUsercode%>';var devRecord = Ext.data.Record.create([    {name: 'usercode',mapping:'usercode'},{name: 'username',mapping:'username'}                   ]); var codeRecord = Ext.data.Record.create([    {name: 'codevalue',mapping:'codevalue'},{name: 'codename',mapping:'codename'}                   ]); var envRecord = Ext.data.Record.create([    {name: 'envcode',mapping:'envcode'},{name: 'envname',mapping:'envname'}                   ]);var envStore = new Ext.data.Store({    //设定读取的地址//autoLoad :true,proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?flag=srctestenv'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"envcode",totalProperty:'results',root:'items',successProperty :'success'}, envRecord),    remoteSort: true});var devStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getUserList.action?flag=all&role=dev'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"usercode",totalProperty:'results',root:'items',successProperty :'success'}, devRecord),    remoteSort: true,listeners: {load: function() {devCombo.setValue(devCombo.getValue());}}   });var testStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getUserList.action?flag=all&role=test'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"usercode",totalProperty:'results',root:'items',successProperty :'success'}, devRecord),    remoteSort: true,listeners: {load: function() {testCombo.setValue(testCombo.getValue());}}   });var chgtestStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getUserList.action?role=test'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"usercode",totalProperty:'results',root:'items',successProperty :'success'}, devRecord),    remoteSort: true,listeners: {load: function() {chgtestCombo.setValue(chgtestCombo.getValue());}}   });var devCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'usercode',hiddenName:'devCombo',displayField:'username',blankText:'请选择开发人员',emptyText:'请选择开发人员',editable:false,forceSelection:true,triggerAction:'all',allowBlank:false,store:devStore,typeAhead: true,width:90});devStore.load();devCombo.setValue(devPerson);var testCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'usercode',hiddenName:'testCombo',displayField:'username',blankText:'请选择测试人员',emptyText:'请选择测试人员',editable:false,forceSelection:true,triggerAction:'all',allowBlank:false,store:testStore,typeAhead: true,width:90});testStore.load();testCombo.setValue(testPerson);var envCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'envcode',hiddenName:'envCombo',displayField:'envname',editable:false,triggerAction:'all',allowBlank:true,store:envStore,typeAhead: true,width:200});var chgtestCombo = new Ext.form.ComboBox({selectOnFocus:true,valueField:'usercode',hiddenName:'chgtestCombo',displayField:'username',blankText:'请试人员',emptyText:'人员',editable:false,forceSelection:true,triggerAction:'all',allowBlank:false,store:chgtestStore,typeAhead: true,width:90});chgtestStore.load();chgtestCombo.setValue(chgtestPerson);//创建工具栏组件var toolbar = new Ext.Toolbar(['-','环:',envCombo,'-','人:',testCombo,'-','发人:',devCombo,'-','活动号:',new Ext.form.TextField({id:'actquery',name: 'actquery'}),'-']);var toolbar2 = new Ext.Toolbar(['-',{text : '通过',iconCls:'complete',handler:testPassed},'-',{xtype: 'tbspacer'},{xtype: 'tbspacer'},'-',{text : '申生产',iconCls:'complete',handler:appToPrd},'-',{xtype: 'tbspacer'},{xtype: 'tbspacer'},{xtype: 'tbspacer'},{xtype: 'tbspacer'},'-','变为:',chgtestCombo,'-',{text : '提交变更',iconCls:'complete',handler:chgTester},'-']);var toolbar3 = new Ext.Toolbar(['-','   ',{id:'queryActsBrn',text : '询',iconCls:'query',handler:queryToTest},'    ','-']);//定义数据集对象var actStore = new Ext.data.GroupingStore({autoLoad :false,groupField:'envname',sortInfo:{field: 'taskid', direction: "ASC"},reader: new Ext.data.JsonReader({    id:"actid",totalProperty:'results',root:'items',successProperty :'success'},Ext.data.Record.create([{name: 'actid',mapping:'actid'},{name: 'taskid',mapping:'taskid'},{name: 'brhcode',mapping:'brhcode'},{name: 'brhname',mapping:'brhname'},{name: 'actno',mapping:'actno'},{name: 'devcode',mapping:'devcode'},{name: 'devname',mapping:'devname'},{name: 'modulecode',mapping:'modulecode'},//缺字段{name: 'envcode',mapping:'envcode'},{name: 'envname',mapping:'envname'},{name: 'spclconf',mapping:'spclconf'},{name: 'spclconfname',mapping:'spclconfname'},{name: 'relatives',mapping:'relatives'},{name: 'deployedEnvs',mapping:'deployedEnvs'},{name: 'urgeflag',mapping:'urgeflag'}])),proxy : new Ext.data.HttpProxy({url : 'getActInTestList.action'})})var urgeflagRecord = Ext.data.Record.create([{name: 'codevalue',mapping:'codevalue'},{name: 'codename',mapping:'codename'}]); var urgeflagStore=new Ext.data.Store({    //设定读取的地址proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?type=urgeflag'}),    //设定读取的格式    reader: new Ext.data.JsonReader({    id:"codevalue",totalProperty:'results',root:'items',successProperty :'success'}, codeRecord),    //urgeflagRecordremoteSort: true});//urgeflagStore.load();//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var actGrid = new Ext.grid.EditorGridPanel({applyTo : 'grid-div',frame:true,tbar : toolbar,//bbar : toolbar2,bbar : new Ext.PagingToolbar({//分页工具栏store : actStore,pageSize : 12,displayInfo : true,displayMsg : '第 {0} 条到 {1} 条，一共 {2} 条',emptyMsg : "没有记录"}),store: actStore,clicksToEdit:1,//height: 480,width:860,stripeRows : true,autoScroll : true,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : '行',width : 40}),//表格行号组件cb,{header: "块", width: 70, dataIndex: 'modulename', sortable: true,renderer:showDetail},{header: "述", width: 120, dataIndex: 'content', sortable: true,editor:new Ext.form.TextField({allowBlank : true,readOnly:true}),renderer:showDetail},{header: "注", width: 80, dataIndex: 'remark', sortable: true,renderer:showDetail},{header: "联", width: 120, dataIndex: 'relatives', sortable: true,editor:new Ext.form.TextField({allowBlank : true,readOnly:true}),renderer:showDetail}],view: new Ext.grid.GroupingView({//forceFit:true,hideGroupedColumn:true,groupByText:'使用当前字段进行分组',showGroupsText:'表格分组',groupTextTpl: '{text} ({[values.rs.length]} {["个活动"]})'}),   listeners: {   'render': function () { toolbar2.render(this.bbar); //add one tbar     toolbar3.render(this.tbar); //add one tbar   }   } });//创建新增或修改书籍信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式function showDetail(value, meta, rec, rowIdx, colIdx, ds){return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';}function queryToTest(){devPerson = devCombo.getValue();testPerson = testCombo.getValue();env = envCombo.getValue();var actQuery = Ext.get('actquery').dom.value;var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在查询活动信息......',progress:true,wait:true,waitConfig:{interval:1000}});actStore.baseParams = {DevCode:devPerson, TestCode:testPerson,envCode:env,actQuery:actQuery};  actStore.load({params:{start:0,limit:12},callback:function afterQuery(response,options, success){msgTip.hide();if(!success){Ext.MessageBox.alert("提示","没有数据！");actStore.removeAll();}}});}function testPassed(){dealActs('testPassed.action');}function dealActs(url){var acts = actGrid.getSelectionModel().getSelections();if(acts.length == 0){Ext.MessageBox.alert("提示","请选择待提交的活动！");return;}var changed = actStore.modified;var missed = false;Ext.each(changed, function(record) {var flag = true;   Ext.each(acts, function(item) {if(record.data.actid == item.data.actid){flag = false;}});if(flag){missed = true;}});if(missed){Ext.MessageBox.confirm('提示','有些记录您做了修改，但没有选择提交，是否继续？',function(id){if(id == 'yes'){commitActs(url);}});}else{commitActs(url);}}function commitActs(url){var proposer = '<%=tUsercode%>';var acts = actGrid.getSelectionModel().getSelections();var jsonData = "["; var appendRecordStrFn = function(record) {   record.data.indexNo = this.indexOf(record);   jsonData += Ext.encode(record.data) + ",";   };   Ext.each(acts , appendRecordStrFn, actStore);   jsonData += "]";var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在提交......',progress:true,wait:true,waitConfig:{interval:1000}});Ext.Ajax.request({url : url,params : {proposer:proposer,jsonData:jsonData},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg,function(){if(!result.success){actStore.removeAll();queryToTest();}else{for(var i = 0 ; i < acts.length ; i++){actStore.remove(acts[i]);}}actStore.modified = [];});},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','提交失败，请联系管理员！');}});}function appToPrd(){dealActs('appToPrd.action');}function chgTester(){var proposer = chgtestCombo.getValue();var acts = actGrid.getSelectionModel().getSelections();if(acts.length == 0){Ext.MessageBox.alert("提示","请选择待提交的活动！");return;}var jsonData = "["; var appendRecordStrFn = function(record) {   record.data.indexNo = this.indexOf(record);   jsonData += Ext.encode(record.data) + ",";   };   Ext.each(acts , appendRecordStrFn, actStore);   jsonData += "]";var msgTip = Ext.MessageBox.show({title:'提示',width : 250,msg:'正在提交......',progress:true,wait:true,waitConfig:{interval:1000}});Ext.Ajax.request({url : 'chgTester.action',params : {proposer:proposer,jsonData:jsonData},method : 'POST',success : function(response,options){msgTip.hide();var result = Ext.util.JSON.decode(response.responseText);Ext.Msg.alert('提示',result.msg,function(){actStore.removeAll();queryToTest();actStore.modified = [];});},failure : function(response,options){msgTip.hide();Ext.Msg.alert('提示','提交失败，请联系管理员！');}});}});

图：

下面的是一些总结杂项：

Ext.Ajax.request({url : 'QueryActivit.action'+actids,method : 'POST',success : function(response,options){var result = Ext.util.JSON.decode(response.responseText);//json->object//eval('var a='+response.responseText);//和上面的功能类似//alert(a.items[0].actid);//alert('result'+result.items[0].actid);var Record = actStore2.recordType;for(var i=0;i<result.items.length;i++){var r = new Record(result.items[i]); //转成RecordactStore2.insert(0,r); }}});数据库获取数据，然后把一个json换成一个object，然后把他们转换成record。actStore2一个storeRecord:4.0里面叫model 其实就是一个类

renderer:function（value， cellmeta， record， rowIndex， columnIndex， store）{

}

1.value是当前单位格的值

2.cellmeta里保存的是cellId单位格id，id是列号，css是这个单位格的css样式。

3.record是所在行数据，你想要什么，record.data["id"]就获得了。

4.rowIndex是行号，不是从头往下数的意思，而是分页后的成果。

5.columnIndex列号。

6.store，这个是你创建表格时辰传递的ds，也就是说表格里所有的数据，你都可以随便调用，

生日换年龄：

(cast(to_char(APPNTBIRTHDAY,'yyyy') as number(10)) - cast(to_char(APPNTBIRTHDAY,'yyyy') as number(10))) as age

上面的一些例子仅供学习，如果你想那过去直接用，基本是不可能的。需要自己改动。只要领会精神就可以了。

EXTjs的案例（一）相关推荐

ExtJS学习：MVC模式案例（三）
在ExtJS案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网 ...
extjs插件开发上传下载文件简单案例
前台,extjs,框架,mybatis,spring,springMVC,简单的文件上传下载案例. 必要的jar包,commons-fileupload-1.3.1.jar,commons-io-2. ...
extjs 月份选择控件_ExtJs日期控件案例（可控制时间的选择） | 学步园
图片效果: ExtJs代码: /* *********************************************************************日期控件的简单案例**** ...
extjs官网+extjs官网案例
extjs官网: http://www.sencha.com/ extjs官网案例: http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ ...
ExtJS学习：MVC模式案例（一）
http://www.lihuai.net/qianduan/extjs/457.html http://www.lihuai.net/qianduan/extjs/1050.html
extjs实现组织架构图_11月22日【上海站】16大案例解读OD组织发展
后疫情.黑天鹅时代下,如何应对瞬息万变的市场环境?如何摸索业务方向.转型升级?很多企业通过对组织实行干预策略,进行适应性优化. 组织发展主要目的是组织有效性,激活个体与组织,推动组织的可持续健康发展, ...
ExtJS 4.2 教程-08：布局系统详解
ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...
使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个员工管理源代码分享在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
[ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法
一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要.但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法? 夹文件夹 extjs的查询组件的API 查询实例主 ...

EXTjs的案例（一）

EXTjs的案例（一）相关推荐

最新文章

热门文章