ext动态加载模板(加载后不可编辑)

       从建基础数据(包含维护)，到创建模板，再到最后的引用花费了5天的时间。如果不是机器太破，3天的时间足够了。可惜，创建出来的模板不具备可编辑性。毕竟也是一番汗水，一份经验，就保存留个纪念（仅模板使用展现）。

ChooseBdgModeWin=function(config){
   var flagCode = null;//模板code修改时使用
   var pbCode = null;	//概算ID,不为空时表示修改概算
   var pbName = new Ext.form.TextField({fieldLabel:'名称',name:'pbName',allowBlank:false,value:config.proName+'概算'});
   var pbDocument = new Ext.form.TextField({fieldLabel:'文件号',name:'pbDocument',allowBlank:false});
   var pbRemark  = new Ext.form.TextArea({xtype:'textarea',fieldLabel:'备注',name:'pbRemark',height:300});
   var bgPanel=new Ext.form.FormPanel({
		width:780,labelWidth:45,labelAlign:"right",
		layout : "form",frame:true,defaults:{anchor:'98%',xtype:'textfield'},
		items:[pbName,pbDocument,pbRemark]
	});
   var templetStore = new Ext.data.Store({
						reader: new Ext.data.JsonReader({root:'root',totalProperty:'totalProperty'},[{name:'btCode',mapping:'btCode'},{name:'btName',mapping:'btName'}]),
					     proxy: new Ext.data.HttpProxy({url:contextPath+'/project/xmgs.ext?pmethod=getTemplet'})
						})
   var templetCombo = new Ext.form.ComboBox({anchor:'95%',labelAlign:"right",fieldLabel:"选择模板",name:'btName',mode:"remote",triggerAction:"all",
					  displayField:"btName",valueField:'btCode',emptyText : "----------------------------------------------选择模板----------------------------------------------",
					  editable:false,store :templetStore,allowBlank:false,
					  listeners:{'select':showTemplet}
					  });
  //展现选择的模板					  
  function showTemplet(templet){
	  flagCode = null;
      var code = templet.value;
      Ext.Ajax.request({
         url:contextPath+'/project/xmgs.ext',
         method:'post',
         params:{pmethod:'showTempletConstructor',btCode:code},
         success:function(response,action){
           var records = Ext.decode(response.responseText);
           templetInfo(records);
         }
      });
  }	
  var maps = {};				  
 function templetInfo(records){
   maps = {};	 
   bdgetRecords = records;
   alert(Ext.encode(records));
   var html = '<div align="center"><table  width="500" border="1" cellpadding="0" cellspacing="0">'
			+'<tr><td width="50" height="50" align = "center" colspan="2">序号</td><td align = "center" width="300">项目费用名称</td><td>投资金额(单位：元)</td></tr>';
   var tempId = Ext.id();//概算总金额
   var tempField = new Ext.form.NumberField({readOnly : true,style:' background:#f0f0f0' });
   maps[tempId] = {field:tempField,recordID:'root'};
   html += '<tr><td width="50" height="35" align = "center" colspan="2">&nbsp;</td><td align = "center" width="300">概算总金额</td><td id="' + tempId + '"></td></tr>';
   var tempFlag = '0';
   var tempParent = 0,tempChild = 0,flag=0;//依次代表:父项、子项和序列排号
   var curentParent = null;
   for(var i = 0; i < records.length; i++){
      flag++;
      var record = records[i];
      tempFlag = record.parent;
      if(record.parent == '0'){
          var id = Ext.id();
          var field = new Ext.form.NumberField({readOnly : true,style:' background:#f0f0f0' });
          currentParent = id;
          maps[id] = {field: field, parentId : null,recordID:record.id};

          tempChild = 0;
          html += '<tr><td width="50" height="35">'+(++tempParent)+'</td><td width="50">&nbsp;</td><td align = "center" width="300">'+record.text+'</td><td id="' + id + '"></td></tr>';
      }else if(tempFlag != '0' && record.parent == tempFlag){
          var id = Ext.id();
          var field = new Ext.form.NumberField({parentId : currentParent});
          field.on('change', function(f) {
             var pid = f.initialConfig.parentId;
             var pField = maps[pid].field;
             var totalCount = 0.0;
             if(tempField.getValue() != "") {
                 totalCount = tempField.getValue() - pField.getValue();
             }   
             var count = 0.0;
             for(var n in maps) {
                 if(maps[n].parentId == pid) {
                     if(maps[n].field.getValue() != "") {
                     	count += maps[n].field.getValue();
                     }
                 }
             }
             pField.setValue(count);
             tempField.setValue(count+totalCount);
          });
          maps[id] = {field: field, parentId : currentParent,recordID:record.id};
          html += '<tr><td width="50" height="35">&nbsp;</td><td width="50">'+(++tempChild)+'</td><td width="300">'+record.text+'</td><td id="' + id + '"></td></tr>';
      }
   }		
   saveBudgetIndex = flag;
   html += '</table><br></div>';	
   var flagPanel = templetPanel.findByType('panel')[0];
   templetPanel.remove(flagPanel);
   var tempPanel = new Ext.Panel({layout:'form',autoScroll:true,labelWidth:65,
            html:html})
   templetPanel.add(tempPanel);
   templetPanel.doLayout();
   for(var n in maps) {
	   maps[n].field.render(n);
   }
} 
  var chooseTempletCmbP = new Ext.Panel({
           region:'north',pading:'5px 5px 5px 5px',height:30,anchor:'95%',
           frame:true,layout:'form',labelWidth:65,
           items:[templetCombo]
  	    }); 
  	    
  var templetPanel = new Ext.Panel({
           region:'north',pading:'5px 5px 5px 5px',height:30,anchor:'95%',
           frame:true,layout:'form',labelWidth:65,autoScroll:true,
           items:[templetCombo]
  	    }); 
	function saveFn(){
	  var bgInfo = convertRecordsToJson(ds_privilege);
	    Ext.Ajax.request({
	     url:contextPath+'/project/xmgs.ext',
	     params:{pmethod:'addItems',bgInfo:bgInfo,parentID:parentID+','+config.ipId},
	     method:'post',
	     success:function(response,options){
	        treeReLoad();
	     }
	  });
	}
  var lastStepBtn = new Ext.Button({text:'上一步',iconCls:'x-button-prior',handler:lastStepFn,hidden:true});
  var nextStepBtn = new Ext.Button({text:'下一步',iconCls:'x-button-go',handler:nextStepFn});
  var clsBtn = new Ext.Button({text:'关闭',iconCls:'x-button-cancel',handler:clsFn,scope:this});
  var saveBtn = new Ext.Button({text:'保存',iconCls:'x-button-save',handler:saveBuggetFn,scope:this,hidden:true});
  var bgPanel=new Ext.Panel({
		layout : "card",
		activeItem :0,autoScroll:true,
		tbar:[nextStepBtn,lastStepBtn,clsBtn,saveBtn],
		items:[bgPanel,templetPanel]
	});
	//上一步
	function lastStepFn(){
	  bgPanel.getLayout().setActiveItem(0);
	  nextStepBtn.show();clsBtn.show();
	  lastStepBtn.hide();saveBtn.hide();
	}
	//下一步
	function nextStepFn(){
	  if(!pbName.isValid()){
             Ext.Msg.alert("系统提示","请先填写概算名称，再做操作!");
             return;
		   };
	   if(!pbDocument.isValid()){
		   Ext.Msg.alert("系统提示","请先填写文件号，再做操作!");
           return;
		   }	   
	  bgPanel.getLayout().setActiveItem(1);
	  nextStepBtn.hide();clsBtn.hide();
	  lastStepBtn.show();saveBtn.show();
	  if(pbCode != null) budgetInfo();
	}
	function valueToHtml(value){
	    var records = Ext.decode(value);
	    for(var i =0; i < records.length;i++){
		     var record = records[i];
	    	 for(var n in maps) {
	    		 var m = maps[n];
	             if(m.recordID == record.btiCode){ 
	                 v = m.field.setValue(record.invest);
	                 break;
	             }
		    }
	   }
    };
	//修改概算时，显示概算信息
	function budgetInfo(){
		 Ext.Ajax.request({
		     url:contextPath+'/project/xmgs.ext',
		     params:{pmethod:'getProBgsInfo',pbCode:pbCode},
		     method:'post',
		     success:function(response,options){
		        var ob = Ext.decode(response.responseText);
		        templetCombo.setValue(ob.btName);
		        flagCode = ob.btCode;
                var records = Ext.decode(ob.templetInfo);
		        templetInfo(records);
		        if(ob.budInfo !='')valueToHtml(ob.budInfo);
		     },
		     failure:function(response,options){
		         var ob = Ext.decode(response.responseText);
		         Ext.Msg.alert("系统提示",ob.btName);
		     }
		  });
	}
	
	//保存概算
	function saveBuggetFn(){
	if(!templetCombo.isValid()){
        Ext.Msg.alert("系统提示","请先选择模板，再做保存!");
		return;
	 }
	 var sbBdValue = [];
	 for(var i = 0;i<bdgetRecords.length;i++){
	    var record = bdgetRecords[i];
	    var v = null;
	    for(var n in maps){
		   var m = maps[n];
		   //if(m.recordID == 'root') alert(m.field.getValue());
           if(m.recordID == record.id){ 
               v = m.field.getValue();
               break;
           }
		}
		var a = {btiCode: record.id , pbiName : record.text , pbiParentcode : record.parent, pbiLevel : record.level, pbiInvestsum : v};
		sbBdValue[sbBdValue.length] = a;
        
	 }
	 var btCode = (flagCode==null? templetCombo.getValue():flagCode)
	 Ext.Ajax.request({
	     url:contextPath+'/project/xmgs.ext',
	     params:{pmethod:'addProBgs',ipId:config.proCode,pbName:pbName.getValue(),btCode:btCode,
		         pbCode:pbCode,pbDocument:pbDocument.getValue(),pbRemark:pbRemark.getValue(),
	             addItems:Ext.encode(sbBdValue)},
	     method:'post',
	     scope:this,
	     success:function(response,options){
	        var ob = Ext.decode(response.responseText);
	        Ext.Msg.alert('系统提示',ob.message);
	        if(ob.success){
	        	bdgetRecords = null;
	        	Ext.getCmp(config.gridID).RefreshGrid();
		        this.close();
		        }
	     },
	     failure:function(response,options){
	         var ob = Ext.decode(response.responseText);
	         Ext.Msg.alert("系统提示",ob.message);
	     }
	  });
	}
	//关闭窗口
	function clsFn(){
	    this.close();
	}
	//对文本域赋值
	this.setInfo = function setInfo(values){
	   pbName.setValue(values.pbName);
	   pbDocument.setValue(values.pbDocument);
       pbRemark.setValue(values.pbRemark);
	}
	//为概算ID赋值
	this.setPbCode = function(value){pbCode = value;}
	ChooseBdgModeWin.superclass.constructor.call(this,{frame:true,autoScroll:true,height:450,width:640,layout:'fit',items: [bgPanel]});
};
Ext.extend(ChooseBdgModeWin,Ext.Window);