extjs 增删改

Ext.onReady(function() {
	// 开启提示功能
	Ext.QuickTips.init();
    Ext.get("loading").show();

// --------------------------  创建树形面板   ------------------------------------------------
			
	var treepanel = new Ext.tree.TreePanel({
				title : '编码分类导航',
				padding : "10px",
				region : 'west',
				layout : 'fit',
				width : 180,
				split: true,
				collapsible : true, // 允许收缩
				trackMouseOver : true,
				autoScroll : true,
				rootVisible : true,
				tbar : [{
							text : "刷新",
							iconCls : "refresh",
							handler : function() {
								window.location.reload();
							}
						}],
				loader : new Ext.tree.TreeLoader({ // 加载解析树
							autoLoad : true,
							url : "/zzc/zzc/bmzd!list.shtml",
							baseParams:{view_code:""},
							processResponse : function(response, node, callback) {
								var json = Ext.util.JSON.decode(response.responseText);
								try {
									var o = json.bmzds;
									node.beginUpdate();
									var l = this;
									Ext.each(o, function(item) {
											item.text = item.name;
											var n = l.createNode(item);
											if (n) {
												node.appendChild(n);
											}
									    
									});
									node.endUpdate();
									this.runCallback(callback,scope || node,[node]);
								} catch (e) {
									this.handleFailure(response);
								}
							},
							listeners : {
								beforeload : function(l, n, c) {
									
									if (n.attributes.id == "rootNode") {
										l.url = '/zzc/zzc/bmzd!list.shtml';
										l.baseParams = {
											view_code : "",
											needEnabled : false
										}
									} else {
										l.url = '/zzc/zzc/bmzd!list.shtml';
										l.baseParams = {
											view_code : n.attributes.view_code,
											needEnabled : false
										}
									}
									c.call();
								}
							}
						}),
				root : new Ext.tree.AsyncTreeNode({ // 根节点
							text : "编码字典",
							id : 'rootNode',
							expanded : true
						})

			});
		
 // --------------------------------管理面板--------------------------------------------------
  
	// var limit = 20;
    
    // 表单
	var bmzdForm = new Ext.form.FormPanel({
				baseCls : 'x-plain',
				border : false,
				autoScroll : true,
				labelWidth : 80,
				defaultType : "textfield",
				defaults : {
					anchor : '90%',
					msgTarget : 'side'
				},
				padding : "10",
				items : [{
							xtype : "hidden",
							name : "bmzd.id",
							id : "id"
						}, {
							xtype : "hidden",
							name : "bmzd.enabled",
							id : "enabledhidden"
						}, {
							xtype : "hidden",
							name : "bmzd.parent",
							id : "parent"
						}, {
							allowBlank : false,
							fieldLabel : "名称",
							name : "bmzd.name",
							id : "name"
						}, {
							fieldLabel : "简码",
							name : "bmzd.simple_code",
							id : "simple_code"
						}, {
							xtype : "numberfield",
							fieldLabel : "序号",
							name : "bmzd.sort",
							id : "sort"
						}, {
							xtype : "checkbox",
							fieldLabel : "状态",
							boxLabel : "启用",
							id : "enabled",
							listeners : {
								check : function(f, b) {
									Ext.getCmp("enabledhidden").setValue(b);
								}
							}
						}, {
							fieldLabel : "备注",
							name : "bmzd.remark",
							id : "remark"
						}, {
							xtype : "displayfield",
							fieldLabel : "级次码",
							name : "view_code",
							id : "view_code"
						}, {
							xtype : "displayfield",
							fieldLabel : "编码等级",
							name : "lvs",
							id : "lvs"
						}, {
							xtype : "displayfield",
							fieldLabel : "创建时间",
							id : "in_date",
							setValue : function(v) {
								if (this.rendered) {
									if (Ext.isEmpty(v)) {
										this.el.dom.innerHTML = "";
									} else {
										if (Ext.isDate(v)) {
											this.el.dom.innerHTML = v.format("Y-m-d H:i:s");
										} else
											this.el.dom.innerHTML = v;
									}
								} else
									this.value = v;
							}
						}],
						buttonAlign : 'center',
						buttons:[
								{
									text : '提交',
									handler : subForm
								},
								{
									text : '关闭',
									handler : function(){
										window.hide();
									}
								}
						]
			});		
		
		//window	
		 var window = new Ext.Window({
					layout : 'fit',
					closeAction : 'hide',
					width : 400,
					height : 300,
				    resizable : false,
					shadow : true, //在面板后显示投影效果
					modal :true,
				    closable:true,
					//plain : true,
					animCollapse:true, //面板闭合过程附有动画效果
					items : [bmzdForm]
			 });
						
		
	 function add(){
	      var node = treepanel.getSelectionModel().getSelectedNode();
          if (node == null) {
              Ext.MessageBox.show({
                    title : '操作窗口',
                    msg : '请先选择编码分类！',
                    buttons : Ext.MessageBox.OK,
                    icon : Ext.MessageBox.WARNING
                });
	           return;
	        }
	        Ext.Ajax.request({
					url : '/zzc/zzc/bmzd!show.shtml',
					method : "POST",
					success : function(response, opt) {
						   var bmzd = Ext.util.JSON.decode(response.responseText);
						   var m = bmzd.bmzd;
						   m.parent = node.attributes.view_code;//父级码
						   //alert(m.parent);
						   bmzdForm.form.reset();
						   bmzdForm.form.setValues(m);
						   bmzdForm.isAdd = true;
						   window.setTitle("添加编码分类");
						   window.show();
					},
					failure : function(response, otp) {
						Ext.Msg.alert("error", response);
					}

				});
	    
	}	
	
   function edit(record){
	        bmzdForm.form.reset();
			bmzdForm.isAdd = false;
		    bmzdForm.getForm().loadRecord(record);
			window.setTitle("修改编码分类");
		    window.show();
	}
	
	 function subForm(){
	 	var bForm = bmzdForm.form;
	    if(bmzdForm.isAdd){   //新增信息
	    	if(bForm.isValid()){
				 bForm.submit({
					waitMsg : '正在提交数据请稍后',
					waitTitle : '提示',
					url : '/zzc/zzc/bmzd!save.shtml',
					method:'POST',
					success:function(form,action){
						window.hide();
						var node = treepanel.getSelectionModel().getSelectedNode();
					    var param = {
							 view_code : node.attributes['view_code'],
						     needEnabled : false
						};
						Ext.apply(store.baseParams, param);
						store.load();
						
					},
					failure:function(form,action){
						Ext.Msg.alert('提示','添加失败'+action.result.msg);
					}
				});
	    	}
		}else{
		     if(bForm.isValid()){
				  bForm.submit({
					waitMsg : '正在提交数据请稍后',
					waitTitle : '提示',
					url : '/zzc/zzc/bmzd!update.shtml',
					method:'POST',
					success:function(form,action){
						window.hide();
						var node = treepanel.getSelectionModel().getSelectedNode();
					    var param = {
							 view_code : node.attributes['view_code'],
						     needEnabled : false
						};
						Ext.apply(store.baseParams, param);
						store.load();
					},
					failure:function(form,action){
						Ext.Msg.alert('提示','修改失败'+action.result.msg);
					}
				});
			    
		    }	
		}
	  
	}
	
	function remove(id) {
		Ext.Ajax.request({
					url : '/zzc/zzc/bmzd!remove.shtml',
					method : "POST",
					success : function(response, opt) {
						var rt = Ext.util.JSON.decode(response.responseText);
						if (rt.success)
							store.reload();
						else
							Ext.Msg.alert("error", rt.msg);
					},
					failure : function(response, otp) {
						Ext.Msg.alert("error", response);
					},
					params : {
						"bmzd.id" : id
					}
				});
	}
	
	
	var fields =["id","view_code","name","simple_code","sort","enabled","leaf","lvs",{
							name : "in_date",
							type : "date",
							dateFormat : "Y-m-d\\TH:i:s"
						},"remark"];
	// 创建数据源
	var store = new Ext.data.JsonStore({
				autoDestroy : true,
				// autoLoad : true,
				url : '/zzc/zzc/bmzd!list.shtml',
				baseParams : {
					view_code : '',
					needEnabled : false
				},
				root : 'bmzds',
				idProperty : 'id',
				fields : fields
			});
	 
	var sm = new Ext.grid.RowSelectionModel({
				singleSelect : true
			 });		
			
	  var bmzdgrid = new Ext.grid.GridPanel({
				region : 'center',
				id : 'bmzd-grid',
				stateful : true, // 防止控件错位
				stripeRows : true,// 隔行换色
				store : store,
				// trackMouseOver : false,
				// disableSelection : true,
				// loadMask : true,
				sm : sm,
				defaults : {
						"sortable" : true
				},
			    listeners : {
						celldblclick : function(grid, rowIndex, columnIndex, e) {
							edit(bmzdgrid.getStore().getAt(rowIndex));
						}
				},
				//autoExpandColumn : "name_column",
				columns : [new Ext.grid.RowNumberer(), {
								id : "name_column",
								sortable : true,
								dataIndex : "name",
								header : "名称"
							}, {
								sortable : true,
								autoWidth : true,
								dataIndex : "simple_code",
								header : "简码"
							}, {
								align : "right",
								sortable : true,
								dataIndex : "sort",
								header : "序号"
							}, {
								sortable : true,
								dataIndex : "view_code",
								header : "级别码"
							}, {
								align : "right",
								sortable : true,
								dataIndex : "lvs",
								header : "等级"
							}, {
								align : "center",
								renderer : function(val) {
									return val
											? "<span style='color:green'>√</span>"
											: "<span style='color:red'>×</span>";
								},
								sortable : true,
								dataIndex : "enabled",
								header : "状态"
							}, {
								align : "center",
								renderer : function(val) {
									return val
											? "<span style='color:green'>√</span>"
											: "<span style='color:red'>×</span>";
								},
								sortable : true,
								dataIndex : "leaf",
								header : "叶"
							}, {
								renderer : Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
								sortable : true,
								dataIndex : "in_date",
								header : "创建时间"
							}],
				// 添加按钮
				tbar : ['-', {
							xtype : "button",
							iconCls : "add",
							text : "添加",
							handler : add
						}, '-',{
							text : "编辑",
							iconCls : "edit",
							handler : function() {
								 var p = this.ownerCt.ownerCt;
									var sm = p.getSelectionModel();
									if (sm.getCount() > 0) {
										var r = sm.getSelected();
										//edit(r.get("id"));
										edit(r);
									

									}
								
							}
							
						},'-',{
						    text : "删除",
							iconCls : "delete",
							handler : function() {
								var p = this.ownerCt.ownerCt;
								var sm = p.getSelectionModel();
								if (sm.getCount() > 0) {
									var r = sm.getSelected();
									var id = r.get("id");
									Ext.MessageBox.confirm('提示', '确认删除?',
											function(btn) {
												if (btn == 'yes') {
													 remove(id);
											 }
									});
	
								}
							}
							
							
						}],
				// 自定义视图的配置
				viewConfig : {
					forceFit : true,
					enableRowBody : true,
					showPreview : true,
					getRowClass : function(record, rowIndex, p, store) {
						if (this.showPreview) {
							p.body = '<p style=" border: 1px dotted #AAAAAA; padding: 1px 6px 1px 6px; margin:5px; font:14px Arial;}"><font color="#15428B"><b>备注：</b></font>' + record.data.remark + '</p>';
							return 'x-grid3-row-expanded';
						}
						return 'x-grid3-row-collapsed';
					}
				}
				/*
				 * , bbar : { xtype : 'pageinfobar', pageSize : limit, store :
				 * store }
				 */
			});
		
		  // 创建右侧面板
		  var mainpanel = new Ext.Panel({
					id : 'main_panel',
					region : 'center',
					margins : '0 5 5 0',
					border:false,
					layout:'fit',
					autoScroll : true,
					items : {
						id : 'main-view',
						layout : 'fit',
						title : '编码管理',
						items : [bmzdgrid]
					}

		});	
		
		// 为导航树添加点击事件
		treepanel.on("click", function(node) {
				//if (!node.isLeaf()) {  
					if(node.attributes['name'])
					    Ext.getCmp("main-view").setTitle('编码管理[父级：'+node.attributes['name']+']');
					else
					    Ext.getCmp("main-view").setTitle('编码管理[父级：根节点]');
					var param = {
						 view_code : node.attributes['view_code'],
					     needEnabled : false
					};
					Ext.apply(store.baseParams, param);
					store.load();
				//}
			});
		
		
		

		// 边框布局
	 	new Ext.Viewport({
				layout : "border",
				items : [treepanel, mainpanel] 
			});
			
    
    Ext.get("loading").hide();
});

评论

1 楼 HappyBoys 2011-09-19  

谢谢。。。学习中。。。