EXT使用笔记(二)

近期开发一个项目要使用到EXTJS,从完全不懂摸索着进行,到将项目完成,过程中发现很多问题,因为是新手,我根据我的学习方式将我的问题记录下来了,方便遇到相同问题的人们,里面部分是网上收集的,大部分是自己总结的,

转载请注明出处(http://echoetang.iteye.com/admin/blogs/510499 By:Gxmis-alextang)

addWindow.show();

                         }

获取record中的数据

record.data.systemversion

//页面重定向

 handler:function(){

    alert('谢谢您再使用本系统!');

    window.location.href = 'login.html';                             

    }

 

//通过id获取某个组件的方法1

Ext.getCmp('id').getValue();

或者: panel.findById(‘id’);

Panel.getComponent(‘id’);

 

 

//获取容器的items属性中的某个组件的方法

例如: panel.items.itemAt(0);

如果items中的组件要访问items里面另外一个的组件则:this.ownerCt.items.itemAt(4);

 

//TextItem的使用

items:[new Ext.Toolbar.TextItem('  XXX 您好,欢迎使用ACC系统.'),'','->','',

    '-',new Ext.Toolbar.TextItem('当前时间:'), clock,'-',

    {id:'logOutBtn',tooltip:'退出系统',iconCls: 'icon-hide-inherited'......

 

 

//某个框架内加入面板

function goto(url,title){  

    //获取中间显示信息的面板

       var center = Ext.getCmp('pCenter'); 

       //为框架添加一个页面

       var html = "<iframe id='frmForm' name='frmForm' src='"+url+"' width='100%' height='100%'></iframe>";

       //获取标题

       if(Ext.getCmp(title)){

           //检查是否有该标题的面板

           //要是已经有该标题的面板则设置该面板为活动面板

           center.setActiveTab(title);

       }else{

           //不存在该标题的面板则创建一个面板

           center.add({

              title:title,

              id:title,

              region:'center',

              closable:true,

              border:false,

              html:html

              }).show;

           center.setActiveTab(title);

       }

    };

 

//设置窗口中的按钮对齐方式

buttonAlign:'center',

              buttons:[

                      {text:'保存',handler:function(){alert('保存数据');}},

                      {text:'重置',handler:function(){alert('重置数据');}}

                      ],

 

//获取json字符串中的一个值

我只会ExtJS中的方法：

var user="{ name: 'username', value: 'jresig' }";

var u =Ext.util.JSON.decode(user);

var u_name=u.name;

 

//使用json jar包进行传送数据的配置

<constant name="struts.objectFactory" value="spring"></constant>

    <include file="struts-default.xml"/>

   

    <!-- JSON包,传送JSON数据 -->

    <package name="json" extends="json-default">

    <action name="showalluser" class="ShowAllUser" method="getAllUser">

    <result type="json">

    <param name="root">userList</param>   

    </result> 

    </action>

    </package>

 

    <!-- struts包 -->

    <package name="userlogin" extends="struts-default"  >

 

 

//2种提交数据并且获取后台数据的方法

第一种使用单纯Ajax进行提交:

Ext.lib.Ajax.request(

              'POST',//提交方式

              'sub.action',//提交目的url

              {

            success:function(response){//成功响应的回调方法,参数response包含后台传过来的数据

           alert(response.responseText); //打印后台传过来的数据

         var result = Ext.decode(response.responseText); //将json字符串数据转换成json对象数据

                   alert(result.pass); //获取Json对象中的某个值

              },

              failure:function(){//响应失败的时候的回调方法

                  

              }        

              },

              panel.getForm().getValues(true)  //Ajax提交的辅助方法,用于获取当前FormPanel中的所用数据,进行提交,true表示获取到的数据位Json组装的字符串,false返回的是Json对象

             

              );

 

也可以传递自己想要的任意数据:

Ext.lib.Ajax.request(

              'POST',

              'sub.action',

              {

              success:function(response){

                   alert(response.responseText);

                   var result = Ext.decode(response.responseText);

                   alert(result.pass);

              },

              failure:function(){

                  

              }        

              },

               // panel.getForm().getValues(true) 

               'user.name=tangtang' //传递任意想要的数据,但是action那边要使用对象来接受数据,通过依赖注入的方式来接受  

              );

//建议这样传

Ext.Ajax.request({

                            url : 'deleteCompany.action',

                            //提交参数

                            params : {

                                 //这里就可以把某个参数传递到action中去

//在action中接受数据是这样的(或者直接写一个和前台一样名字的变量,为这个变量提供set和get方法,struts2就能通过依赖注入的方式进行微他赋值,获取前台的数据)

//String strCompanyId = ServletActionContext.getRequest().getParameter("companyId");

                                 companyId : record.data.companyId

                            },

                            success : function() {

                                 grid_company.getStore().remove(record);

                            },

                            failure : function() {

                                 Ext.Msg.show({

                                     title : '错误提示',

                                     msg : '删除时发生错误!',

                                     buttons : Ext.Msg.OK,

                                     icon : Ext.Msg.ERROR

                                 });

Ext.Ajax.request({

     url:'updateoradd.action',

     method:'POST',

     success:function(){Ext.Msg.show('chengong');},

     failure:function(){Ext.Msg.show('shibai');},

     params:{

       

        'sysversion.id.subsystem':Ext.getCmp('versubsystemname').getValue(),

        'sysversion.id.termianlid':Ext.getCmp('versystemid').getValue(),

        'sysversion.currentversion':Ext.getCmp('vernowversion').getRawValue(),

        'sysversion.planversion':Ext.getCmp('verupdatetoversion').getRawValue(),       

        'sysVersionHis.operator':'000000',   //操作人要根据登陆的人进行填充

        'sysVersionHis.changedtype':'0' //改变类型要根据操作修改     

     }

    

     });

第二种提交方式的实现方法1:

直接在FormPanel的属性中配置以下:

url:'sub.action', //提交目的的url

        method:'post',  //提交方式

        listeners:{  //FormPanel的监听属性

      "actioncomplete":function(_form,_action){ //当服务器响应完成后的回调函数actioncomplete

        alert(_action.response.responseText); //打印后台传回的数据

       

        var myobj = Ext.util.JSON.decode(_action.response.responseText);//转换成json对象

            

                alert(myobj.name);  //获取对象的某个值

        }

        },

 

另外在按钮的事件响应里面提交数据:

buttons:[

       

        //提交按钮对象 用{}生成兑对象

              {  

            text:'Login',

            handler:function(){

               panel.getForm().submit(); //为当前FormPanel进行提交,提交的时候自动收集所有的

数据提交给后台

…..

 

第二种提交方式的实现方法2:

直接在button的内部进行提交:

handler:function(){  

              //提交数据

                   

                   panel.form.submit({                      

                       // clientValidation :true,//是否实行前台验证  

                        method:'post',//发送发送方式 GET，POST  

                        waitMsg :' Wait....',//提交信息时候等待信息  

                        waitTitle :'Loding',//提交信息时候等待信息的标题  

                        url:'sub.action',//提交页面  

                        timeout :200,//超时的秒数  

                        

                        success:function(form,action){//验证成功的执行函数

                            alert(action.response.responseText);

                             //panel.getForm.load({url:'http://localhost:8080/testformsubmit/out.jsp',waitMsg:'dengdeng'});

                          //location.href = '/AccWeb/accwebpages/success.jsp';

                    },  

                        failure :function(form,action){//验证失败的执行函数 

                            //alert(action.reponse.responseText);

                            Ext.Msg.alert('Info','Submit fail!');

                               }

                    });

                 

            }

 

extjs中form与grid交互数据（record）

 首先在grid的tbar中定义编辑按钮：

Js代码

1. id:'editDataButton',  
2. text:'编辑',  
3. tooltip:'编辑',  
4. iconCls:'edit',  
5. handler: function(){ showeditPanel();}  

id:'editDataButton',

text:'编辑',

tooltip:'编辑',

iconCls:'edit',

handler: function(){ showeditPanel();}

 

再定义form：

Js代码

1. var xjjlEditForm = new Ext.FormPanel({.......省略form中的定义内容........});  

var xjjlEditForm = new Ext.FormPanel({.......省略form中的定义内容........});

 

然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window)：

Js代码

1. //--编辑按钮调用的函数（弹出编辑窗体）  
2. function showeditPanel()  
3. {       //直接取得选中的行对应的record  
4.         var record = grid.getSelectionModel().getSelected()   
5.         if(!record){  
6.             Ext.Msg.alert('信息','请选择要编辑的数据');  
7.             return;  
8.         }  
9.           
10.         //--定义编辑窗体  
11.         if(!xjjlEditWindow)  
12.         {  
13.             xjjlEditWindow = new Ext.Window({  
14.                 el: 'edit_win',  //前端放置当前js文件的页面中的div名称  
15.                 title:'编辑记录',  
16.                 width: 650,  
17.                 height: 360,  
18.                 closable: false,  
19.                 closeAction: 'hide',  
20.                 resizable: false,   
21.                 items: xjjlEditForm //在window中加载编辑的form  
22.             });           
23.               
24.         }  
25.         xjjlEditWindow.show(Ext.get('editDataButton'));//显示编辑窗口  
26.           
27.        //[注 意]先xjjlEditWindow.show(); 再 xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解决之前的页面加载完成以后,第一 次点击[编辑]按钮时无法加载数据到form的问题了。  
28.         xjjlEditForm.getForm().loadRecord(record); //关键是这里用当前选中的grid中的record填充form  
29.     }  

//--编辑按钮调用的函数（弹出编辑窗体）

function showeditPanel()

{       //直接取得选中的行对应的record

    var record = grid.getSelectionModel().getSelected()

    if(!record){

      Ext.Msg.alert('信息','请选择要编辑的数据');

      return;

  }

 

  //--定义编辑窗体

  if(!xjjlEditWindow)

  {

   xjjlEditWindow = new Ext.Window({

       el: 'edit_win',  //前端放置当前js文件的页面中的div名称

       title:'编辑记录',

       width: 650,

       height: 360,

       closable: false,

       closeAction: 'hide',

      resizable: false,

       items: xjjlEditForm //在window中加载编辑的form

   });  

  

    }

    xjjlEditWindow.show(Ext.get('editDataButton'));//显示编辑窗口