当前位置: 代码迷 >> JavaScript >> Extjs的CheckboxSelectionModel,ColumnModel,值来显
  详细解决方案

Extjs的CheckboxSelectionModel,ColumnModel,值来显

热度:164   发布时间:2012-11-23 00:03:43.0
Extjs的CheckboxSelectionModel,ColumnModel,值回显

有三个方面的内容,一个是远程获取数据,一个是页面跳转回来FORM表单值保留,一个是自动选中复选框,这是在工作中经常用到的,看完保证不会在遇到这类问题了。? 附件是工程截图

?

?<form action="<%=basePath%>/app/step2kettle_new.jsp" method="post" id="kettle" name="kettle">??
??<input type="hidden" id="folder1" name="folder1"></input>
??<input type="hidden" id="wfName" name="wfName"></input>
??<input type="hidden" id="folder1Id" name="folder1Id"></input>
?</form>
?<table align="center">
??<tr>
???<td>
????<div id="grid"></div>
???</td>
??</tr>
?</table>
?<div id="subform"></div>
?<div id="add-win" class="x-hidden">
??<div class="x-window-header">
???节点维护
??</div>
??<div id="add">
??</div>
?</div>
<SCRIPT LANGUAGE="JavaScript">

?var flag = '1';//标志位,第一次进页面可以选中默认项,第二次加载数据不再选中默认行
?var folderValue = "<%=v.getFolderId()%>";
?var sysID = '<%=v.getSysID()%>';
?var modID = '<%=v.getModID()%>';
?var typeID = '<%=v.getJobTypeID()%>';
?var nodeID = '<%=v.getNodeID()%>';
?var policyID = '<%=v.getPolicyID()%>';
?var typeName = '<%=v.getJobTypeName()%>';
?
? function jsonDecode(data){
? ?return new Function("return"+data)();
? }
? function mes(){
? ?Ext.MessageBox.alert("信息","该节点配置的数据源无任务,请查看数据源配置并修改调度节点信息");
? }
?var folderStore? = new Ext.data.JsonStore({
??url: '<%=basePath%>/getFolder.di?nodeID='+nodeID+'&typeID='+typeID,
??fields: ['folderID', 'folderName']
?});
?
?folderStore.on("loadexception",mes);
?//-2011.11.8,add by zxg
?folderStore.on("load",function(store,record,opts){
??if(folderValue!='null'){
???Ext.getCmp("folder").setValue(folderValue);//回显
???getWorkFlows();//复选框内容显示
???}
?});
?//
?folderStore.load();
?
?var folder = new Ext.form.ComboBox({
??? fieldLabel: 'KETTLE任务类型<span style="color: red">*</span>',
??store: folderStore,
??id:'folder',
??name:'folder',
??? displayField:'folderName',
??valueField:'folderID',???????
??? typeAhead: true,
??? mode: 'local',
??triggerAction: 'all',
??forceSelection :true,
??? selectOnFocus:true,
??width : 200
??? });?
?function getWorkFlows(){
??? ds.load({params:{kettleType:folder.getValue()},callback: setBackValue});
?}?
?folder.on('select',getWorkFlows);
?
?var Plant = Ext.data.Record.create([{name:'wf',mapping:'wf'}]);
?var ds = new Ext.data.GroupingStore({
???proxy: new Ext.data.HttpProxy({url:'<%=basePath%>/getWokflowByFolderAndNode.di?nodeID='+nodeID+'&typeID='+typeID}),
????? reader: new Ext.data.JsonReader({}, Plant)
? });
? /*
?var bar = new Ext.PagingToolbar({
??????? pageSize: 20,
??????? store: ds,
??????? displayInfo: true,
??????? displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
??????? emptyMsg: "没有记录",
????firstText:"首页",
????prevText:"上一页",
????nextText:"下一页",
????lastText:"尾页",
????refreshText:"刷新",
????beforePageText :"当前页",
????afterPageText:"共{0}页"
???? });?
??? */
?var sm = new Ext.grid.CheckboxSelectionModel();???
?var cm = new Ext.grid.ColumnModel([
??? sm,
?? {header:'Kettle任务名称',dataIndex:'wf',sortable:true}?
? ]);
?//设置选中的复选框内容
?function setBackValue(){
? var baV="<%=v.getWfName()%>".split(",");//要回显的所有主键
? var records=[];//存放选中记录
? for(var i=0;i<baV.length;i++){
? ?ds.each(function(record){
? ??if(baV[i]==record.get("wf")){//根据后台数据判断那些记录默认选中??
????? records.push(record);
???? }
? ?});
? }
?? sm.selectRecords(records);//执行选中记录
?}
?function nextStep(){
??var tt =sm.getSelections();
??
??if (tt.length<1)
??{
???Ext.MessageBox.alert("信息","请选择一条记录");
??}else{
???document.all.item("folder1Id").value=folder.getValue();
???//getRawValue();文本值
???for(var i=0;i<tt.length;i++){
????document.all.item("wfName").value += tt[i].data.wf+",";
???}
???document.forms["kettle"].submit();
??}
?}

?function back(){
??location.href = '<%=basePath%>/app/step1.jsp?sysID='+sysID+'&modID='+modID+'&policyID='+policyID+'&nodeID='+nodeID+'&jobTypeName='+typeName+'&jobTypeID='+typeID;
?}
?Ext.onReady(function() {
?Ext.QuickTips.init();
?Ext.MessageBox.buttonText.ok = "确定";
?var modField = new Ext.form.TextField({name:'id',value:''});
?var processform=new Ext.FormPanel({applyTo:'subform',items:[modField]});
? ?processform.hide();
?var grid = new Ext.grid.GridPanel({
?????id: 'nodegrid',
?????loadMask: {msg:'正在加载数据,请稍侯…'},
?????store:ds,
?????cm:cm,
?????sm:sm,
?????viewConfig: { forceFit:true},
??????? ?tbar:[
??????{text:'上一步',iconCls:'edit',handler:back},'-',
??????{text:'下一步', iconCls:'add',iconAlign: 'right' ,handler:nextStep},'-'
?????],
?????//bbar: bar,
?????width:730,
?????? ??height:340,
??????? ?frame:false,
?????collapsible: false,
??????? ?animCollapse: false,
??????? ?iconCls:'icon-grid'
?????? });?

?? ?var ct = new Ext.Panel({
?????applyTo: 'grid',
?????frame: true,
?????title: 'Kettle任务列表',
??????? ?defaultType: 'textfield',
?????tbar: ['KETTLE任务类型? :', folder],
?????items: [grid]
??});
});

?</SCRIPT>

?

  相关解决方案