Ext 추가 삭제 및 수정 실현

프론트 데스크:

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer(),
	sm, 
	{header:'     ',width:120,dataIndex:'dhhCommonId'},
	{header:'     ',width:200,dataIndex:'dhhName'},
	{header:'   ',width:120,dataIndex:'supplymonth'},
	{header:'   ',width:120,dataIndex:'supplysection'},
	{header:'   ',width:120,dataIndex:'supplydate'},
	{header:'    ',width:180,dataIndex:'createdate'},
	{header:'   ',width:120,dataIndex:'createuser'}
]);
//            
cm.defaultSortable = true;
var store = new Ext.data.JsonStore({
	url:'../../om/supplySection.do?method=findPageSupplySection',
	totalProperty:'totalProperty',
	root:'root',
	fields:[
		{name: 'ssJavaid'},
		{name: 'dhhCommonId'},
		{name: 'dhhName'},
		{name: 'supplymonth'},
		{name: 'supplysection'},
		{name: 'supplydate'},
		{name: 'createdate'},
		{name: 'createuser'}
	]
});
var orderColumnGrid = new Ext.grid.GridPanel({
	height:370,
	bodyStyle:'width:100%;',//         
	stripeRows:true,//    
	loadMask: {msg:'      ，   ……'},	
	store:store,
	cm: cm,	
	sm:sm,		
	bbar: new Ext.PagingToolbar({
		plugins:new Ext.ux.Andrie.pPageSize(),	//       
		pageSize:10,
		store: store,
		displayInfo: true,
		displayMsg: '    {0}    {1}    ，   {2}  ',
		emptyMsg: "    "
	})

});
store.load({params:{start:0,limit:10}});

그 중에서 store 는 배경 에서 json 문자열 을 얻 었 습 니 다. 목록 의 마지막 에 store. load ({params: {start: 0, limit: 10}) 를 추가 해 야 합 니 다.store URL 을 터치 하여 json 문자열 데 이 터 를 얻 습 니 다. 물론 store 의 작성 방법 은 많 습 니 다.json 문자열 형식: 예

：{totalProperty:100,root:[{id:0,name:’name0’,descon:’descon0’},{id:1,name:’name1’,descon:’descon1’},{id:2,name:’name2’,descon:’descon2’}]
}

"totalProperty" 는 목록 의 총 갯 수 입 니 다. store 의 totalProperty: "totalProperty" 작은 따옴표 의 이름 과 같 으 면 됩 니 다. 예 를 들 어 store 의 totalProperty: "total" 작은 따옴표 의 이름 이 "total" 로 바 뀌 면 json 은 "]: {total: 100,..., root 와 같 습 니 다. plugins: grid 의 bba 는 rplugins: new Ext. ux. Andree. pPageSize () 가 하나 더 생 겼 습 니 다.... / 목록 에 몇 줄 을 표시 하 는 지 는 드 롭 다운 상자 입 니 다. "페이지 당 몇 줄 을 표시 합 니까?" 기능 이 있 고 페이지 를 지원 합 니 다. 제 가 인터넷 에서 DOWN 을 사용 하 는 자원 입 니 다. 사용: < script type = "text / javascript" src = "... /. / resources / js / pPageSize. js" > < / script > (경로 자체 변경) 참조그리고 bbar 에 추가 하면 됩 니 다. 첨부 파일 은 마지막 에 첨부 됩 니 다. 배경: 페이지 의 배경 코드 에 대해 서 는 말 하지 않 고 페이지 에 필요 한 매개 변 수 를 말 합 니 다. 배경 에 들 어 오 는 매개 변 수 는 start, limit 입 니 다. 각각 start 조 부터 limit 조 데 이 터 를 조회 하고 다음 페이지 를 클릭 하면 start 가 달라 집 니 다. 돌아 올 때의 코드:

response.setContentType("text/json;charset=utf-8");
response.getWriter().write(str);

그 중에서 str 는 당신 이 맞 춘 json 문자열 입 니 다. 형식 은 위 에서 언급 되 었 습 니 다. 2. 목록 Ext. grid. GridPanel 추가 삭제 2. 1 추가 정의

var tbars = ['->',//    
		'-', {
			text : '<img src="../../resources/images/img/add.gif"/>  ',
			tooltip : '        ',
			handler : addOrderColumn
		}, '-'];

GridPanel 에 tbar: tbars 를 한 줄 추가 하면 목록 의 헤더 에 '추가' 단추 가 나타 납 니 다. funciont 함 수 를 추가 호출 합 니 다. 모든 funciont 에 사용 되 는 구성 요 소 는 방법 에 적 혀 있 습 니 다. 열 고 닫 을 때 생 성, 소각 에 유리 합 니 다. 코드:

var addOrderColumn = function() {
	//          
	var orderColumnButtons = [{
		xtype : 'submit',
		text : '  ',
		handler : function() {
			if(orderColumnForm.getForm().isValid()){
				//                 
				if(Ext.get('ssStartDate').getValue() > Ext.get('ssEndDate').getValue()){
					Ext.MessageBox.alert("    ", "[      ]     [      ]!"); 
					return false;
				}			
				orderColumnForm.getForm().submit({ 
					url:'../../om/supplySection.do', 
					params:{method:'saveSupplySection'}, 
					method:'post',
					waitMsg:'    ，   ...', 
					success:function(form,action){
						orderColumnWindow.destroy();
						Ext.Msg.alert("    ","      !",
							function(){
								store.reload();
							},this
						);
					}, 
					failure:function(form,action){ 
						Ext.MessageBox.alert("    ", "            ！");
					} 
				}); 
			}
		}
	}, {
		text : '  ',
		handler : function() {
			orderColumnWindow.destroy();
		}
	}];
	
			
	var dhhStore =  new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
			url:'../../om/oM.do?method=findAllOMs'
		}), 
		reader : new Ext.data.JsonReader({
		root : 'root'		
		},[
			{name : 'javaid',mapping : 'javaid'},
			{name : 'omName',mapping : 'omName'}
		])
	});
	//      
	var dhhmc = new Ext.form.ComboBox({
		fieldLabel : '   ',
		hiddenName:'javaid',
		autoDestroy : true,
		store : dhhStore,
		valueField : 'javaid',
		displayField : 'omName',
		typeAhead : true,
		mode : 'local',
		triggerAction : 'all',
		emptyText : '      ',
		selectOnFocus : true,
		forceSelection:true,
		editable : true,
		width : widthValue
	});
	dhhStore.load();
	//       
	var orderColumnForm = new Ext.FormPanel({
		// title: '          ',
		bodyStyle : 'padding:5px',
		frame : true,
		layoutOnTabChange : true,
		autoHeight : true,
		autoWidth : true,
		labelWidth : 150,
		labelAlign : 'right',
		items : [dhhmc,{
			xtype : 'datefield',
			fieldLabel : '      ',
			name : 'ssStartDate',
			emptyText : 'YYYY-MM',
			format: 'Y-m', 
			allowBlank:false,
			width : 150
		},{
			xtype : 'datefield',
			fieldLabel : '      ',
			emptyText : 'YYYY-MM',
			format: 'Y-m', 
			name : 'ssEndDate',
			allowBlank:false,
			width : 150
		}],
		buttons : orderColumnButtons
	});
	//       

	//           ，   
	var orderColumnWindow = new Ext.Window({
		title : "        ",
		width : 400,
		height : 200,
		autoScroll : true,
		collapsible : true,
		maximizable : true,
		layout : 'fit',
		// plain:true,
		// bodyStyle:'padding:5px;',
		modal : true,
		items : orderColumnForm
	});

	orderColumnWindow.show();
	return orderColumnForm;
};

새로 추가 할 때 데 이 터 를 초기 화 하려 면 '새로 추가' 버튼 에 비슷 한 코드 를 추가 하 십시오.

handler : function() {
	var dhhId = selectDhhForm.form.findField('javaid').getValue();
	var hqForm = addOrderColumn ();
	hqForm.load({
		url : '../../om/dhhDate.do?method=initDhhDate&dhhId='+ dhhId,
		waitMsg : '      ，   ...',
		method:"get",
		success:function(form,action){},
		failuer : function(){
			 Ext.Msg.alert('    ', '         ！');
		}
	});
}

즉, addOrderColumn 창 을 열 때 창 에 있 는 필드 할당 이 증가 할 때 배경 에서 FormBean 으로 직접 값 을 가 져 옵 니 다 (아, struts 1). 그리고 저장 할 때 이 변경 사항 을 저장 하고 움 직 입 니 다. 특히 배경 은 성공 하거나 실패 한 json 정 보 를 되 돌려 야 합 니 다. 프론트 데스크 는 성공 적 인 정 보 를 받 은 후에 창 orderColumnWindow. destroy () 를 소각 합 니 다.;, 그리고 목록 의 데이터 store. reload () 를 새로 고침 합 니 다.... / resources / images / img / delete. gif "/ > 삭제", tooltip: "주문 세그먼트 기록 삭제", handler: deleteSS}, "-"]; 삭제 가 증가 보다 훨씬 간단 합 니 다. grid store 에 'sJavid' 가 있 습 니 다. 이것 은 목록 을 표시 할 때 JSON 문자열 이 들 어 오 는 것 입 니 다. 인터페이스 에 표시 되 지 않 지만 기록 마다 이 ID 가 있 습 니 다. "수정"구체 적 으로 말씀 드 리 겠 습 니 다. 삭제 할 때 이 ID 에 따라 배경 에서 삭제 하면 됩 니 다.

var deleteSS = function(){	
	var record = sm.getSelected();
	if(record&&sm.getCount()==1){
		Ext.MessageBox.confirm('    ', '            ?', function(buttonobj){
		if(buttonobj=='yes'){
			var myCon = new Ext.data.Connection();
			waitMsg:'      ，   ...';
			myCon.request({
		       url:'../../om/supplySection.do?method=deleteSupplySection&ssId=' + record.get('ssJavaid'),
		       method:'post',
		       waitMsg:'    ，   ...', 
		       successProperty:'success',
		       success:function(transport){
					Ext.Msg.alert("    ","      !",
						function(){
							store.reload();
						},this
					);
				}, 
				failure:function(form,action){ 
					Ext.MessageBox.alert("    ", "            ！");
				} 
		      },this);
			}
		});
	}else{
		Ext.Msg.alert('    ','               ！');
	}
	
};