[转帖]ExtJs与服务器的相互(后生可畏卡塔尔(قطر‎

1、Ext.data.Store.load(卡塔尔国;方法是异步的,下边包车型大巴方法获得的reCount始终是0,因为还未等后台的法子实践完就赋值了,这时store的record还未有获得值。

Ext是二个可怜好的Ajax框架,其雍容高尚的外观表现实在令大家折服,但是三个施用始终离开不劳动器端,由此在贯彻支付中大家须要对Ext与劳动器端的人机联作工夫有较为详细的垂询,在付出中技术格外熟习地运用。本文对Ext应用中与服务器交互作用的常用方法作具体的介绍,本文的内容大部份来源于《ExtJS实用开拓指南》。
  总体来讲,Ext与劳务器端的相互影响使用能够归纳为二种档次,富含表单FormPanel的拍卖(提交、加载卡塔尔、控件人机联作及客户发起的Ajax央求等三种。
风华正茂、表单提交(submit卡塔尔及加载(load卡塔尔国
  这里说的表单是指用Ext的FormPanel创设的表单,看上面包车型大巴例子:

var testStore = new Ext.data.GroupingStore({ proxy : new Ext.data.HttpProxy, reader : new Ext.data.JsonReader({ root : 'hstamcx', totalProperty : "results", fields : ["id","value"] })});Ext.onReady{ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; testStore.load (); var reCount = testStore.getCount(); var port = new Ext.Viewport({ layout : 'auto', frame : true, items : [winKey] });});

Ext.onReady(function()…{
  var f=new Ext.form.FormPanel(…{
  renderTo:”hello”,
  title:”顾客新闻录入框”,
  height:200,
  width:300,
  labelWidth:60,
  labelAlign:”right”,
  frame:true,
  defaults:…{xtype:”textfield”,width:180},
  items:[
  …{name:”username”,fieldLabel:”姓名”},
  …{name:”password”,fieldLabel:”密码”,inputType:”password”},
  …{name:”email”,田野Label:”电子邮件”},
  …{xtype:”textarea”,name:”intro”,fieldLabel:”简介”}
  ],
  buttons:[…{text:”提交”},…{text:”取消”}]  
 })
 });

2、假诺想要对加载的值进行拍卖,必得将持续管理写在回调函数中。

 

Ext.onReady{ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; testStore.load({ callback : function { var reCount = testStore.getCount; var port = new Ext.Viewport({ layout : 'auto', frame : true, items : [winKey] });});

要付出该表单,则能够间接调用FormPanel上面form对象的submit方法就能够,代码如下:

那个时候能够博得reCount的值,况兼callback :
function的r正是store加载查到的多寡。

f.form.submit(…{
     url:”server.js”,
waitTitle:”请稍候”,
     waitMsg:”正在交付表单数据,请稍候。。。。。。”
     });

但依旧存在难题:r的数据值只好在回调函数里面使用,在callback函数里既不能够给外界的其它因素赋值,也不曾主意将r数据传到外面去

  调用submit方法后,私下认可境况下服务器端应用程序须要再次来到一个JSON数据对象,该对象满含八个属性,success的值是布尔值true或false,假若success的值为true,则象战胜务器端管理成功,不然表示退步;而errors的值是三个对象,对象中的每五特性质表示错误的字段名称,而属性值为不当描述。
  举个例子,要是我们有服务器端验证,上面包车型大巴回到结果表示当表单提交管理出错开上下班时间给顾客端再次来到的多寡。
server.js文件中的内容如下:

3、假设想在js页面向后台发送恳求,并在外侧使用后台重回的数据值,能够使用Ext.Ajax.request,并将乞求形式设置成同步,接纳数据的变量要定义在Ext.Ajax.request外面

…{
    success: false,
    errors: …{
        username: “姓名不能够为空”,
        times: “迟到次数必需为数字!”
    }
}

 var cancelMode; Ext.Ajax.request({ url: '', method: 'post', sync:true, //同步请求 success: function { var response = Ext.util.JSON.decode(response.responseText); cancelMode = response.hstamcx[0].param_value; } });

结果如图所示:

那个时候就能够在外围使用Ext.Ajax.request的倡议得到的多寡了,比方alert;

 
  当然,尽管success属性值改为true,则代表服务器端的拍卖成功,这个时候得以在success定义的回调函数中作相应的拍卖,比如上边包车型地铁代码表示在表单管理成功后,弹出提示新闻,代码如下:

后台代码示例:该示例是举个差非常的少例子,而不是总体代码

f.form.submit(…{
     waitTitle:”请稍候”,
     waitMsg:”正在交付表单数据,请稍候。。。。。。”,
     url:” server.js”,
     method:”POST”,
     success:function(action,form)
     …{
      alert(“提交成功!”);
     })
 
  别的后生可畏种表单动作是表单中数量的加载。要给表单中的字段设置值,能够透过调用字段的setValue方法,也得以一贯在早先化字段的时候在安顿参数中设置value属性值,其余还大概有大器晚成种方法是经过Ajax的不二等秘书诀从服务器端加载表单中各样字段的值。这种措施也正是大家那边要介绍的表单数据加载。
  ExtJS的表单数据加载通过BasicForm的load方法来扩充,表单数据加载动作由类Ext.form.Action.Load定义,实施多少加载动作会到服务器端加载数据,私下认可情形下服务器端须要重返多少个饱含success属性及data属性的JSON对象,内容差不离如下:

public void getData(HttpServletResponse response){ TestData td = TestDataDao.getTestdata(); String message = "{name:" + td .getName()+ ",id:" + td.getId()+ "}"; PrintWriter out=response.getWriter; out.flush(); }

 

以上所述是作者给我们介绍的ExtJs异步不可能向外传值和赋值的完备清除办法,希望对大家享有助于,要是我们有此外疑问请给自家留言,小编会及时回复大家的。在那也非常多谢大家对台本之家网址的支撑!

…{
    success: true,
    data: …{
        username: “冷雨”,
        times: 1
    }
}

上边大家看二个行使到表单数据加载的大约示例代码:

Ext.QuickTips.init();
Ext.onReady(function()…{ 
 var f=new Ext.form.FormPanel(…{
  renderTo:”hello”,
  title:”顾客新闻录入框”,
  height:130,
  width:320,
  labelWidth:60,
  labelAlign:”right”,
  frame:true,
  defaults:…{width:180,xtype:”textfield”},
  items:[…{
   xtype:”textfield”,
   name:”username”,
   fieldLabel:”姓名”
   },
   …{
   xtype:”textfield”,
   name:”times”,
   田野先生Label:”登入次数”
   }
  ],
  buttons:[…{text:”加载表单数据”,
    handler:s}]   
 }); 
 function s()
 …{
 f.form.load(…{
     waitTitle:”请稍候”,
     waitMsg:”正在加载表单数据,请稍候。。。。。。”,
     url:”data.js”,
     success:function(action,form)
     …{
      alert(“加载成功!”);
     },
     failure:function(action,form)
     …{
      alert(“数据加载退步!”卡塔尔国;
     }
     }); 
 }
 
 });

 

服务器data.js中的内容为:

…{
    success: true,
    data: …{
        username: “冷雨”,
        times: 100
    }
}

当点击“加载表单数据”按键的时候,会推行f那个函数,f函数中央市直机关接调用f.form.load({}卡塔尔(英语:State of Qatar)来加载表单中的数据,load方法中的参数与submit方法相似。施行上面的代码,在从劳动器端成功加载数据后,会活动把加载的数额设置到表单对应的依次字段中,然后还大概会进行success钦赐的回调函数,如图9-23所示。
 

图 9-23 表单数据加载示例

二、控件的相互影响 
  一些急需从服务器加载数据的控件会活动与服务器交互作用,比如TreePanel上边包车型客车TreeLoader、GridPanel里面用到的Store等。那些控件其实都能够加载各种类型的数据,也便是论战上服务器能够回来恣意数据给Ext顾客端,然后由Ext客商端转化成那么些控件能够识其他数码。那一个控件都提供了默许的数码拆解深入分析器,能剖析固定格式的数额供那一个控件使用,在行使那几个控件的时候,大家必要细致看这几个控件的API,看他们切实能管理什么样格式的数据,那样就足以在劳务器端再次回到其私下认可的数量格式就能够。
  下边,我们来看TreePanel,这是Ext中用来体现树构造的控件,该控件能够通过三个url来加载树的节点音讯,并协理异步树节点加载格局。看下边选取TreePanel的代码: