懒的写注释了,暂时把这里当做是我的文档保存。这是一个tree与editorgrid联合使用的案例,比较简单。继承方式类似于js的继承。坦率的说在做了十个月的ext开发中,我水平也仅仅停留在还算是比较熟练的使用水平上,对于ext的复杂运用和高质量编程还处于盲区。现在的认识是,首先一定要有js编程基础,我说的不是仅仅会用js做判断之类的,而是要达到熟悉其继承关系的层次。这样之后,再参考官方例子多做练习,在熟悉官方例子中慢慢形成自己的编写风格。由于,复用问题,我劝诫看客在使用ext过程中不要频繁使用id属性,尤其是在form中使用。不多写了,做个保存,开始工作。
BudgedModelPanel = function(){ /** * 模板显示树 */ var budgetModelTree = new Ext.tree.TreePanel({ region : 'west', anchor : '95%', frame : false, width:200, height:500, checkModel: 'multiple', onlyLeafCheckable: true, animate : false, rootVisible : true, autoScroll : true, loader : new Ext.tree.TreeLoader(), //之前定义的加载器 root : new Ext.tree.AsyncTreeNode() }); /** * 子项列表 */ var sm=new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([sm,{dataIndex:'budgetMid',hidden:true}, new Ext.grid.RowNumberer({header:'序号',width:50}), {width:150,header:"子项名称",sortable:true,dataIndex:'budgetName', editor:new Ext.form.TextField({allowBlank:false}) }]); var store = new Ext.data.Store(); var childRecord =Ext.data.Record.create([store,{dataIndex:'budgetMid',hidden:true}, {header:"子项名称",dataIndex:'budgetName'} ]); var bdModelEditorGrid = new Ext.grid.EditorGridPanel({region : 'center', title:'子项列表', animCollapse:false,cm:cm,width:'50%',frame:true,height:350,clicksToEdit:1, sm:sm,ds:store,stripeRows:true,fouceFit:true, tbar:[{text:'增加',iconCls:'ext-button-add',handler:addLine},{text:'删除',iconCls:'ext-button-delete',handler:removeChild},{text:'保存',iconCls:'x-button-save'}] , loadMask:{msg:'正在加载数据,请稍候'},trackMouseOver:true,bodyStyle:'padding:5px 5px 0' }); //增加一行 function addLine(){ var tempData = new childRecord({budgetName:''}); bdModelEditorGrid.stopEditing(); store.add(tempData); store.modified.push(tempData); bdModelEditorGrid.startEditing(0, 0); } //删除 function removeChild(){ var records = bdModelEditorGrid.getSelectionModel().getSelections(); var bgIDS = ""; for(var i=0;i<records.length;i++){ var record = records[i]; bgIDS += record.pbiCode; if(i!=records.length-1) bgIDS += ","; } if(records==0){Ext.Msg.alert("系统提示","请选择要删除的数据");return;}; Ext.Msg.confirm("系统提示:","请确认是否执行删除操作?",function(button,text){ if(button=="yes"){ for(var i=0;i<records.length;i++){ var record = records[i]; if(record!=null) store.remove(record); bdModelEditorGrid.refresh(); } }}); } BudgedModelPanel.superclass.constructor.call(this,{ layout:'border',height:500,width:500, items:[budgetModelTree,bdModelEditorGrid] }); } Ext.extend(BudgedModelPanel,Ext.Panel);