ext3.0 增删改查集中到一个页面

ext3.0 ，很新颖，很可能代表着未来B/S架构页面框架的方向。

在用ext的时候，发现几个小问题:

1.包的路径不明确。嵌入的页面没有放到web-root目下的请求前要加../但是通过window.showModuleDialoge弹出的页面则不需要加

2.在建树的时候总会出现树节点前面的空白区域出现一个个类似找不到图片的标志，其实是Ext.BLANK_IMAGE_URL = '../pagesExt/resources/images/default/s.gif';图片路径没有写对（../不是多了就是没有）。

下面是我实现的一个表的增删改查集中到一个页面的页面代码贴出来和大家讨论讨论：

前面的数据源定义代码

  //创建工具栏组件
  var toolbar = new Ext.Toolbar([
   {text : 'aaaaa',iconCls:'add',handler:showAddApp},//点击触发的函数
   {text : 'bbbbb',iconCls:'option',handler:showModifyApp},
   {text : 'cccccc',iconCls:'remove',handler:showDeleteApp},
   {text : 'dddddd',iconCls:'query',handler:showQueryApp}
  ]); 
  //创建查询panel
  var queryPanel = new Ext.Panel({
      activeTab: 0,
            width:800,
            //baseCls:'',//作用在面板元素上的CSS样式类 （默认为 'x-panel'）。
            autoWidth:true,
            hideBorders:true,//隐藏每个组件的边框
            height:40,
            autoHeight : true,//自动适应高度
            plain:true,
           collapsible:true, //面板是可收缩的
            defaults:{autoScroll: true},//应用在全体items项上的
            items:[{
             html: "<div id='query'  style='visibility:hidden;' ></div>"
            }]
  });

  //创建查询工具栏
  var tabs2 = new Ext.Panel({
      applyTo:'panel-div',
            activeTab: 0,
            width:800,
            autoWidth:true,
            tbar : toolbar,
            hideBorders:true,//隐藏每个组件的边框
            //hideLabel : true,//只能在FormLayout布局管理器控制的容器下渲染才有用
            height:40,
            autoHeight : true,//自动适应高度
            plain:true,
            defaults:{autoScroll: true},
            items:[queryPanel,{
                 html: "<div id='grid-div' style='width:100%; height:100%;'/>"
                }]
     });
 //添加业务应用系统要触发的函数
  function showAddApp(){//添加
   appForm.form.reset();
   appForm.isAdd = true;
   win.setTitle("添加 ");
   win.show();
  }
  
  function showModifyApp(){//修改
   var appList = getAppCheckBoxList();
   var num = appList.length;
   if(num > 1){
    Ext.MessageBox.alert("提示","每次只能修改一条信息。");
   }else if(num == 1){
    appForm.form.reset();
    appForm.isAdd = false;
    win.setTitle("详细");
    win.show();
    var appId = appList[0];
    loadForm(appId);
   }
  }
  function showDeleteApp(){//删除
   var appList = getAppCheckBoxList();
   var num = appList.length;
   if(num == 0){
    return;
   }
   Ext.MessageBox.confirm("提示","<nobr>您确定要删除吗?</nobr>",function(btnId){
    if(btnId == 'yes'){
     deleteApps(appList);
    }
   });
  }
  //查询工具栏触发的函数
  queryPanel.collapse(true);//隐藏查询面板
  function showQueryApp(){//查询
    var queryDiv=document.getElementById('query');
    if(queryDiv.style.visibility=='hidden'){
     queryPanel.expand(true);// 展开面板body
     queryDiv.style.visibility='visible';
     queryDiv.style.width = '100%';
     queryDiv.style.height='20%';
    }else{
     queryPanel.collapse(true);//闭合面板body隐藏其内容
     queryForm.form.reset();
     appStore.baseParams={
      start:0,
      limit:5
     };
     queryDiv.style.visibility='hidden';
     queryDiv.style.width = '0';
     queryDiv.style.height = '0';
    }
  }
  //创建Grid表格组件
   //分页组件
  var pagination=new Ext.PagingToolbar({
            store: appStore,
            pageSize: 5,
            displayInfo: true,
            beforePageText:'第',
            afterPageText:'页&nbsp;&nbsp;共{0}页',
            firstText:'第一页',
            prevText :'前一页',
            nextText : '下一页',
            lastText : '最后一页',
            refreshText : '刷新',
            displayMsg: '数据展示条数: {0} 到 {1} 共 {2}条',
            emptyMsg: "没有数据"
        });  
  var cb = new Ext.grid.CheckboxSelectionModel()
  var appGrid = new Ext.grid.GridPanel({
   applyTo : 'grid-div',
   frame:true,
   height:400,
   autoHeight:true,
   //tbar : tabs2,
   store: appStore,
   stripeRows : true,
   autoScroll : true,
   loadMask: true,
   viewConfig : {
    autoFill : true
   },
   sm : cb,
   columns: [//配置表格列
    cb,
   //APPID APPNAME APPDESC PRIORITY APPORDER TASKTYPE TASKURL EXPIERDAYS EXPIERHOURS APPCODE  
    {header: " 编号", width: 120, dataIndex: 'appId', sortable: true},
    {header: " 名称", width: 160, dataIndex: 'appName', sortable: true},
    {header: " 描述", width: 160, dataIndex: 'appDesc', sortable: true},
    {header: " 优先级", width: 100, dataIndex: 'priority', sortable: true},
    {header: " 排序", width: 80, dataIndex: 'appOrder', sortable: true},
    {header: " 获取方式", width: 140, dataIndex: 'taskType', sortable: true},
    {header: "  ", width: 80, dataIndex: 'taskUrl', sortable: true},
    {header: "超时 ", width: 80, dataIndex: 'expierDays', sortable: true},
    {header: "超时时间", width: 80, dataIndex: 'expierHours', sortable: true},
    {header: " 编码", width: 80, dataIndex: 'appCode', sortable: true}
   ],
   bbar:pagination
  });
//创建QueryFORM
   var queryForm = new Ext.FormPanel({
      applyTo :'query',
      frame:true,
      layout: 'table',
            //extraCls: 'x-abs-layout-item,.x-form-select-one',itemCSS样式
            layoutConfig: new Ext.layout.TableLayout({ columns: 8}),
      border:false,
     items : [
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 编号:</p>"},
      {
       xtype:'textfield',
       width : 100,
       name : 'appId'
      },
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 名称:</p>"},
      {
       xtype:'textfield',
       width : 100,
       name : 'appName'
      },
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 先级:</p>"},
      {
       xtype:'spinnerfield',
       width : 100,
       minValue: 0,
                maxValue: 99,
                allowDecimals: true,
                decimalPrecision: 1,
       name : 'priority'
      },
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 排序:</p>"},
      {
       xtype:'spinnerfield',
       width : 100,
       minValue: 0,
                maxValue: 99,
                allowDecimals: true,
                decimalPrecision: 1,
       name : 'appOrder'
      },
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 获取方式:</p>"},
      {
      //代办获取方式默认值是0
       xtype:'combo',
       width : 100,
       store : typeStore,//设置数据源
       hiddenName : 'taskType',
       allQuery:'all',//查询全部信息的查询字符串
       triggerAction: 'all',//单击触发按钮显示全部数据
       editable : false,//禁止编辑
       loadingText : '正在加载代办获取方式信息',//加载数据时显示的提示信息
       displayField:'name',//定义要显示的字段
       valueField : 'TaskTypeId',
       mode: 'remote',//远程模式
       name : 'taskType'
      },
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 接口:</p>"},
      {
       xtype : 'textfield',
       width : 100,
        name : 'taskUrl'
      },
      {xtype: 'tbtext', text: "<p style='font-size:8pt;'> 编码:</p>"},
      {
       xtype : 'textfield',
       width : 100,
        name : 'appCode'
      },{
       xtype:'button',
       text : '查&nbsp;&nbsp;&nbsp;询',
       handler : querySubmit //点击提交按钮触发的函数
      }
     ]
    });
//查询面板内的button触发的函数
    function querySubmit(){
     var fields = queryForm.items;
     var obj = {};
     for(var i = 0 ; i < fields.length ; i++){
      var item =  fields.itemAt(i);
      if(item.getXType() != 'tbtext' && item.getXType() != 'button'){
       var value = item.getValue();
       if(item.getXType() == 'combo'){
        var index = item.store.find('name',value);
        if(index != -1){
         var selItem = item.store.getAt(index); 
         value = selItem.get('id');
        }
       }
       obj[item.name] = value;
      }
     }
     var appName=obj['appName'];
     var appId=obj['appId'];
     var priority=obj['priority'];
     var taskType=obj['taskType'];
     var appOrder=obj['appOrder'];
     var taskUrl=obj['taskUrl'];
     var taskCode=obj['taskCode'];
     appStore.baseParams={
      start:0,
      limit:5,
      appName:appName,
      appId:appId,
      priority:priority,
      taskType:taskType,
      appOrder:appOrder,
      taskUrl:taskUrl,
      taskCode:taskCode
     };
     appStore.load();
     appStore.commitChanges();
    }
  //

  Ext.QuickTips.init();
  Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
  
   var appForm = new Ext.FormPanel({
      labelSeparator : "：",
      frame:true,
      border:false,
     items : [
      {
       xtype:'textfield',
       width : 200,
       allowBlank : false,//不允许为空
       blankText : ' 名称不能为空',
       name : 'appName',
       fieldLabel:' 名称'
      },{
       xtype:'textarea',
       width : 200,
       name : 'appDesc',
       fieldLabel:' 描述'
      },{
       xtype:'spinnerfield',
       width : 200,
       minValue: 0,
                maxValue: 99,
                allowDecimals: true,
                decimalPrecision: 1,
                value: '0',
       name : 'priority',
       fieldLabel : ' 优先级'
      },{
       xtype:'spinnerfield',
       width : 200,
       minValue: 0,
                maxValue: 99,
                allowDecimals: true,
                decimalPrecision: 1,
                value : '0',
       name : 'appOrder',
       fieldLabel:' 排序'
      },{
      //

       xtype:'combo',
       width : 200,
       allowBlank : false,
       blankText : '必须选择 方式',
       store : typeStore,//设置数据源
       hiddenName : 'taskType',
       allQuery:'all',//查询全部信息的查询字符串
       triggerAction: 'all',//单击触发按钮显示全部数据
       editable : false,//禁止编辑
       loadingText : '正在加载代办获取方式信息',//加载数据时显示的提示信息,仅当mode为remote时可用
       displayField:'name',//定义要显示的字段
       valueField : 'TaskTypeId',
       mode: 'local',//远程模式
       emptyText:'请选择代办获取方式',
       //value:'0',
       name:'taskType',
       fieldLabel:' 方式'
      },{
       xtype : 'textfield',
       width : 200,
        name : 'taskUrl',
        fieldLabel:' 接口'
      },{
       xtype : 'spinnerfield',
       width : 200,
       minValue: 0,
                maxValue: 99,
                allowDecimals: true,
                decimalPrecision: 1,
                value:'0',
        name : 'expierDays',
       fieldLabel:' 天数'
      },{
       xtype: 'spinnerfield',
       width : 200,
                minValue: 0,
                maxValue: 24,
                allowDecimals: true,
                decimalPrecision: 1,
                value:'0',
        name : 'expierHours',
        fieldLabel:' 时间'
      },{
       xtype : 'textfield',
       width : 200,
        name : 'appCode',
        fieldLabel:' 编码'
      },{
       xtype:'hidden',
       name : 'appId'
      }
     ],
     buttons:[
      {
       text : '提交',
       handler : submitForm  

      },
      {
       text : '关闭',
       handler : function(){
        win.hide();
       }
      }
     ]
    });
    
  //加载表单数据
  function loadForm(appId){
   appForm.form.load({
    waitMsg : '正在加载数据,请稍后',//提示信息
    waitTitle : '提示',//标题
    url : 'app.do?method=appPreEdit',//请求的url地址
    params : {appId:appId},
    method:'GET',//请求方式
    success:function(form,action){//加载成功的处理函数
    },
    failure:function(form,action){//加载失败的处理函数
     Ext.MessageBox.alert('提示','数据加载失败');
    }
   });
  }
  
  //删除
  function deleteApps(appList){
   var appids = appList.join('-');
   var msgTip = Ext.MessageBox.show({
    title:'提示',
    width : 250,
    msg:'正在删除 信息,请稍后......'
   });
   Ext.Ajax.request({
    url : 'app.do?method=appDel',
    params : {appId : appids},
    method : 'POST',
    success : function(response,options){
     msgTip.hide();
     var result = Ext.util.JSON.decode(response.responseText);
     if(result.success){
      //服务器端数据成功删除后，同步删除客户端列表中的数据
      for(var i = 0 ; i < appList.length ; i++){
       var index = appStore.find('appId',appList[i]);
       if(index != -1){
        var rec = appStore.getAt(index)
        appStore.remove(rec);
       }
      }
      Ext.MessageBox.alert('提示','删除  成功.');
     }else{
      Ext.MessageBox.alert('提示','删除 失败！');
     }
    },
    failure : function(response,options){
     msgTip.hide();
     Ext.MessageBox.alert('提示','删除  请求失败！');
    }
   });
  }
    //弹出窗口创建
  var win = new Ext.Window({
   layout:'fit',
      width:380,
      closeAction:'hide',
      height:380,
   resizable : false,
   shadow : true,
   modal :true,
      closable:true,
      bodyStyle:'padding:5 5 5 5',
      animCollapse:true,
   items:[appForm]
  });

   //表单提交处理函数
   function submitForm(){
     if(appForm.isAdd==true){
      appForm.form.submit({
       clientValidation:true,//进行客户端验证
       waitTitle : '提示',//标题
       waitMsg : '正在提交数据,请稍后',//提示信息
       url : 'app.do?method=appAdd',//请求的url地址
       method:'POST',//请求方式
       success:function(form,action){//加载成功的处理函数
          win.hide();
          updateAppList(action.result.appId); 
          Ext.MessageBox.alert('提示','添加 成功');
         },
       failure:function(form,action){//加载失败的处理函数
        Ext.MessageBox.alert('提示','添加 失败');
       }
      });
     }else{
      appForm.form.submit({
       clientValidation : true,
       waitMsg : '正在提交数据,请稍后',
       waitTitle : '提示',
       url : 'app.do?method=appEdit',
       method : 'POST',
       success : function(form,action){
        win.hide();
        updateAppList(action.result.appId);
        Ext.MessageBox.alert('提示','修改 成功');
       },
       failure : function(form,action){
        Ext.MessageBox.alert('提示','修改 失败');
       }
       });
     }
   }
   
     //明细数据修改后，同步更新列表信息
   function updateAppList(appId){
    var fields = getFormFieldsObj(appId);
    var index = appStore.find('appId',appId);
    if(index != -1){
     var item = appStore.getAt(index);
     for(var fieldName in fields){
      item.set(fieldName,fields[fieldName]);
     }
     appStore.commitChanges();
    }else{
     fields['appId']=appId;
     var rec = new Ext.data.Record(fields);
     appStore.add(rec);
     
    }
   }
   //取得表单数据
  function getFormFieldsObj(appId){
   var fields = appForm.items;
   var obj = {};
   for(var i = 0 ; i < fields.length ; i++){
    var item =  fields.itemAt(i);
    var value = item.getValue();
    if(item.getXType() == 'combo'){
     var index = item.store.find('TaskTypeId',value);
     if(index != -1){
      var selItem = item.store.getAt(index); 
      value = selItem.get('name');
     }
    }
    obj[item.name] = value;
    
   }
   if(Ext.isEmpty(obj['id'])){
    obj['id'] = appId;
   }
   return obj;
  }
   //获取列表中已选择的数据
   function getAppCheckBoxList(){
    var recs = appGrid.getSelectionModel().getSelections();
    var list = [];
    if(recs.length == 0){
     Ext.MessageBox.alert('提示','<nobr>请选择要进行操作的数据!</nobr>');
    }else{
     for(var i = 0 ; i < recs.length ; i++){
      var rec = recs[i];
      list.push(rec.get('appId'))
     }
    }
    return list;
   }