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('当前时间:'), 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代码
[*]id:'editDataButton',
[*]text:'编辑',
[*]tooltip:'编辑',
[*]iconCls:'edit',
[*]handler: function(){ showeditPanel();}
id:'editDataButton',
text:'编辑',
tooltip:'编辑',
iconCls:'edit',
handler: function(){ showeditPanel();}
再定义form：
Js代码
[*]var xjjlEditForm = new Ext.FormPanel({.......省略form中的定义内容........});
var xjjlEditForm = new Ext.FormPanel({.......省略form中的定义内容........});
然后定义编辑按钮要调用的函数showeditPanel(同时定义一个加载form的window)：
Js代码
[*]//--编辑按钮调用的函数（弹出编辑窗体）
[*]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'));//显示编辑窗口
[*]
[*] //[注 意]先xjjlEditWindow.show(); 再 xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解决之前的页面加载完成以后,第一 次点击[编辑]按钮时无法加载数据到form的问题了。
[*] xjjlEditForm.getForm().loadRecord(record); //关键是这里用当前选中的grid中的record填充form
[*] }
//--编辑按钮调用的函数（弹出编辑窗体）
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'));//显示编辑窗口
页:
[1]