读书人

extjs 增删节

发布时间: 2012-10-12 10:17:04 作者: rapoo

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");} elsethis.el.dom.innerHTML = v;}} elsethis.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();elseExt.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();});
谢谢。。。学习中。。。

读书人网 >JavaScript

热点推荐