`
83026191
  • 浏览: 45782 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs组建话编程(FormPanel)

阅读更多

// 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);
   }
  
});

分享到:
评论

相关推荐

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...

    EXTjs图开编程EXTJS

    通过深入学习并实践EXTJS的图形编程,开发者能够构建出具有专业级图形展示能力的Web应用,为用户提供直观、交互性强的数据分析工具。在实际项目中,结合EXTJS的图形组件,我们可以实现复杂的业务逻辑,提高工作效率...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    extjs 高级编程

    extjs高级编程extjs高级编程extjs高级编程

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    extJS 可视化编程工具破解版

    在标题中提到的“可视化编程工具”,指的是用于简化ExtJS开发过程的一种图形化工具,这种工具允许开发者通过拖拽和配置组件来创建应用的界面,从而提高开发效率。 描述中提到了“extJS汉化中文版”,这表明这个工具...

    extjs组建继承结构图

    extjs组建继承结构图 让你了解extjs的整个架构!

    ExtJs4.0 表单提交Demo

    ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...

    extJs中关于formPanel动态添加组件的验证问题

    在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    extjs4如何给同一个formpanel不同的url_.docx

    在EXTJS4中,FormPanel是一个非常重要的组件,用于创建包含表单元素的用户界面。在某些场景下,我们可能需要一个FormPanel实例能够根据不同的情况提交到不同的URL。这个问题可以通过灵活地设置和操作FormPanel及其...

    formpanel extjs

    extjs formpanel学习,秘诀,笔记

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    ExtJS的表单

    ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已

    ExtJs 动态添加表单

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用的用户界面。它提供了丰富的组件模型、数据绑定机制以及丰富的API,使得开发者能够创建功能丰富的动态表单。在"动态添加表单"这个主题...

    轻松搞定Extjs 带目录

    它强调了JavaScript面向对象编程(OOP)在Extjs框架中的应用,并通过实例演示了如何使用各种组件和布局来创建复杂的用户界面。本教程通过递进式的结构,使读者从基础知识起步,逐步掌握Extjs的高级应用,最终能够...

    ExtJs 登陆框、框架

    在ExtJS中,我们可以利用FormPanel组件来构建这个登录界面,同时配合Field组件(如TextField)来处理输入。 首先,创建一个FormPanel实例,设置其布局为fit(适应布局),然后添加TextField组件分别对应用户名和...

    FCKeditor结合extjs实例

    标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合,涉及到的主要是两个前端富文本编辑器库:FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时,如何将这两者有效地整合以实现复杂的用户界面...

Global site tag (gtag.js) - Google Analytics