extjs组建话编程（FormPanel）

最新推荐文章于 2024-09-16 08:47:17 发布

zhuyusss

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量126

点赞数

分类专栏： extjs 文章标签：编程 EXT json JavaScript Ajax ViewUI

extjs 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

// JavaScript Document// JavaScript Document
//PersonViewGridPanel.SIORE_URL="http://localhost/IISHelp/ExtJSTest/server/app/test/11/xmlstore.asp"
/****************************************************************************************************/

PersonListFormPanel=Ext.extend(Ext.form.FormPanel,{

   //构造方法
   //_cfg下面可以实现继承
   constructor:function(_cfg){
      if(_cfg==null)
      {
        _cfg={};
      }
       //应用于当前主类本身
       Ext.apply(this,_cfg);

      var _readOnly=this["readOnly"]==null?false:this["readOnly"],
        PersonListFormPanel.superclass.constructor.call(this,{
                         height:200,
                   width:350,
                         frame:true,
       labeWidth:45,//
                  // renderTo:Ext.getBody(),
                   defaultType:"textfield",
       defaults:{anchor:"98%",readOnly:this["readOnly"]==null?false:this["readOnly"]},
       //Ext.apply{this.form,{baseCls:"x-plain"}),
       items:[{
                      fieldLabel:"姓名",
                    name:"name"
                         },{
                      fieldLabel:"年龄",
                      name:"age"
                      },{
                             xtype:'combo',
                          fieldLabel:"性别",
           hiddenName:"sex",
                          readOnly:true,
                          mode:"local",
                          displayField:"sex",
                          triggerAction:"all",
                         //value:"",
           //设置是否只读
           disabled:_readOnly,
                          store:new Ext.data.SimpleStore({
                             fields:["sex"],
                          data:[["男"],["女"]]
                                  })
                          }]
         });
           //表单提交事件
           this.addEvents("submit");
   },
   //表单提交
      submit:function(_params){
   if(_params==null)
      _params={};

     try{
      if(this.url!="")
      //success:this.onSubmit通过它决定提交是否成功
       this.getForm().submit({url:this.url,params=_params,success:this.onSubmit,waitTitle:"数据传送",waitMsg:"数据传送中,请稍后...",scope:this});
   }catch(_err){
      }
   },
  //获取用户添加值
      getValues:function(){
   //?record
   //验证
    if(this.getForm().isValid())

    return new Ext.data.Record(this.getForm().getValues());
       else
       throw Error("您输入的年龄不符合要求");
   },
   //设置用户添加值到表单
   setValues:function(_r){
    this.getForm().loadRecord(_r);
   },
   //
   reset:function(){
    this.getForm.reset();
   },
   //表单提交触发事件
   onSubmit:function(_form,_action)
   {
    this.fireEvent("submint",this,_action,this.getValues());
   }
});
/*************************************************************************************************/
//继承上面的FormPanel
PersonListViewFormPanel=Ext.extend(PersonListFormPanel,{
        //构造方法
   constructor:function(){
        PersonListViewFormPanel.superclass.constructor.call(this,{
       renderTo:Ext.getBody(),
       //defaults:{readOnly:true}
       width:355,
       readOnly:true
     })
   }

})
/************************************************************************************************/
//添加继承下面写的widnow
InsertPersonInfoWindow=Ext.extend(PersonInfoWindow,{
   //url会把路径传给PersonInfoWindow 的url
   url:"路径",
      title:"添加人员",
   //从写
   onSubmit:function(_form,_action,_values){
    //添加的时候返回id
    var _data=_values.data;
    Ext.apply(_data,{id:_action.result.id});
    //取id
    //alert(_action.result.id)
    try{
      this.fireEvent("submit",this,new Ext.data.Record(_data));

     // alert(Ext.util.JSON.encode(_data));
       }catch(_err)
   {
    return;
   }
   this.close();
   }
});
/************************************************************************************************/
//修改继承下面的widnow(可以从写)
UpdatePersonInfoWindow=Ext.extend(PersonInfoWindow,{
       title:"修改人员",
    url:"",
    pnId:"",
    //加载的时候获取表单数据
    load:function(_r){
   //form指的是PersonListFormPanel的对象
      this.form.setValues(_r);
       this.pnId=_r.get("id");
    },
     onSubmitClick:function(){
   alert(this.pnId);
    this.form.submit();
  }
  //从写
    onSubmit:function(_form,_action,_values){
    //添加的时候返回id
    var _data=_values.data;
    Ext.apply(_data,{id:this.pnId});
    //取id
    //alert(_action.result.id)
    try{
      this.fireEvent("submit",this,new Ext.data.Record(_data));

      alert(Ext.util.JSON.encode(_data));
       }catch(_err)
   {
    return;
   }
   this.close();
   }
});
/***********************************************************************************************************/
//window

PersonInfoWindow=Ext.extend(Ext.Window,{
//引用panel
     form:null,
url:""
constructor:function(_cfg){
   Ext.apply(this,_cfg);

   this.form=new PersonInfoFormPanel({url:this.url});

   this.form=new PersonListFormPanel(),
   PersonInfoWindow.superclass.constructor.call(this,{
         plain:true,
      width:370,
      modal:true,
      items:this.form,
      closeAction:"hide",
      buttons:[{
          text:"确定¨",
       handler:this.onSubmitClick,
       scope:this
      },{
       text:"取消",
       handler:this.onCancelClick,
       scope:this
      }]
   });
   //
   //alert(this.onSubmitClick())
   //¶¨ÒåÊÂ¼þ
   this.addEvents("submit");

   this.form.on("submit",this.onSubmit,this);
},

close:function(){
        this.form.reset();
        this.hide();
},
//(on)事件
onSubmitClick:function(){
  /*
  try{
   // this.fireEvent触发事件 from.getValues()调用上面的
   this.fireEvent("sumbmit",this,this.from.getValues());
      //alert(Ext.util.JSON.encode(this.form.getValues().data));

  }catch(_err){
    //捕捉错误返回
   //return;
   }
   this.close();*/
   this.form.submit();
},
onCancelClick:function(){

   this.close();
},
onSubmit:function(_form,_action,_values){
   //取id
   //alert(_action.result.id)
   try{
    //submit和表格通信的
    this.fireEvent("submit",this,_values);
      }catch(_err)
   {
    return;
   }
   this.close();
   }

});
/**********************************************************************************************/
PersonListGridPanel =Ext.extend(Ext.grid.GridPanel,{
   //引用 InsertPersonInfoWindow 等于java的实例化
   insertWin:new InsertPersonInfoWindow(),
   //引用 UpdatePersonInfoWindow 等于java的实例化
   updateWin:new UpdatePersonInfoWindow(),
      constructor:function(){
   //this.insertWin=new InsertPersonInfoWindow(),
    /*
   这和java里面的继承一个意思。super是超级，父亲的意思，superclass就是父类的意思，constructor是构造器的意思，
这句代码的意思就是调用它父类的构造函数
    */
            PersonListGridPanel.superclass.constructor.call(this,{
       renderTo:Ext.getBody(),
       height:200,
       width:350,
    tbar:[{
        text:"添加成员",
        handler:function(){
         this.insertWin.show();
         },
         scope:this
        },"-",{
        text:"修改成员",
        handler:function(){
       this.updateWin.show();
           try{
           this.updateWin.load(this.getSelected());
           }catch(_err)
           {
         Ext.Msg.alert("系统提示",_err.description);
         this.updateWin.close();
           }
       },
       scope:this
        },"-",{
        text:"删除成员",
         handler:function(){
       //this.remove();
       Ext.Msg.confirm("系统提示","是否删除",onRemovePerson,this);
       }
        }],
       //enableColumnMove:false,
          //colModel 等同于columns
           colModel:new Ext.grid.ColumnModel([
                        {header: "姓名", width: 100, sortable: true, dataIndex: 'name'},//menuDisabled:true
                        {header: "年龄", width: 100, sortable: true, dataIndex: 'sex'},
                        {header: "性别", width: 100, sortable: true, dataIndex: 'age'}
         ]),

           store:new Ext.data.JsonStore({
            autoLoad:true,//等于store.load();
               data:[{name:"sss",age:28,sex:"女"},{name:"sss",age:28,sex:"男"}],
            fields:["id","name","age","sex"]
           }),
       selModel:new Ext.grid.RowSelectionModel({
          singleSelect:true,
       listeners:{
                       "rowselect":{
            //调用选中行的事件
             fn:onRowSelect,
               // fn:function(_sel, _index , _r){
                     // alert(_index);
          //°获取上面的formPanel
          //Ext.getCmp("view_form").getForm().loadRecord(_r);
         //      this.fireEvent("rowselect",_r);
                                      //     },
         //作用域
                 scope:this
                    }
      }

         })
  });
// }
    //提交时间
    this.insertWin.on("submit",this.onInserWinSubmit,this);
    //事件
       this.addEvents("rowselect");
    this.updateWin.on("submit",this.onUpdateWinSubmit,this);
   },
   //添加方法
   insert:function(){
         this.getStore().add(_r);
   },
   onInserWinSubmit:function(win,_r){
       this.insert(_r);
   },
   //定义选中的方法
   getSelected:function(){
    //得到当前GirdForm的引用
       var _sm=this.getSelectionModel();
    //判断如果当前没有被选中的话点击修改择提示错误
    if(_sm.getCount()==0)
      throw Error("请选定要修改的数据");
    return _sm.getSelected();
   },
   //修改方法
   update:function(_r){
    try{
   //选中的值store（Record）
      var _sr=this.getSelected();
   //json数组
   var _data=_sr.data;
   //便利json的属性
   for(var _i in _data){
    //讲给定修改的值_r付给修改后的值_i
      _sr.set(_i,_r.get(_i)) ;
   }
     //提交
   _sr.commit();
   //修改后下面的panel也跟着改变
   this.fireEvent("rowselect",_sr)
    }catch(_err){

    }
   },
   //修改事件
   onUpdateWinSubmit:function(_win,_r){
      this.update(_r);
   },
   //删除
   remove:function(){
    try{
     var _st=this.getSelected();
     Ext.Ajax.request({url:"",params:{id:_st.get("id")}});
     //this.getStore().remove(this.getSelected());
     this.getStore().remove(_st);
     this.fireEvent("rowselect",new Ext.data.Record({
       name:"",
       age:"",
       sex:"男"
         }))
     }catch(_err){
    Ext.Msg.alert("系统提示",_err.description);
     }
   },
   //删除事件
   onRemovePerson:function(_btn)
   {
      if(_btn=="yes")
   this.remove();
   },
   //选中行的事件(修改)
   onRowSelect:function(_sel, _index , _r){
          this.fireEvent("rowselect",_r);
   }

});