博客换主题啦！！！

feed订阅 腾讯微博 你好，欢迎光临！　

Neeke

Tag Archives: extjs 布局

ExtJS将GridPanel放入TabPanel中

2009.02.23 , , 4 Comments , 6,401 浏览

完整的GridPanel也有了，我现在需要将它组装到后台管理中去。现在要求点击一下左边Tree中的“人员信息”节点，右边的TabPanel就显示出与之对应的GridPanel。最简单的方法就是在TabPanel的html属性（应该可以这么叫吧）中使用iframe来打开另一个用于显示GridPanel的页面，相关代码如下：

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserListGridPanel.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});

这种做法虽然很简单，但是又带来两个问题：
1.页面会刷新
2.UserListGridPanel.jsp页面中也必须加载庞大的ExtJS库
当然也有办法解决了，可以使用autoLoad来解决。修改上面的代码：

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //自动载入UserListGridPanel.jsp页面，该页面含有JavaScript，不缓存
autoLoad:{url:'UserListGridPanel.jsp',scripts:true,nocache:true}
});
}
tab.setActiveTab(n);
}
}
});

用了之后我又头大了，正常的话应该是如图下图所示。


可现在得到的却是下面这种结果。


想来想去，改来改去，最后我猜想应该是渲染的时候出问题了，上面两种方式中UserListGridPanel的renderTo属性一直都是Ext.getBody()，可是显示结果却不一样，也就是说两种情况下的Ext.getBody()不是同一个对象（OOP习惯了，什么都是对象O(∩_∩)O哈哈~）。第一种方式中Ext.getBody()指的就UserListGridPanel.jsp，而第二种方式中Ext.getBody()指的则是main.jsp。
于是试着在UserListGridPanel.jsp中创建一个id为“UserListGridPanel”的div，然后修改rederTo属性为Ext.get('UserListGridPanel')，看来猜的没错，这样改确实可以。可是页面又变成下面这样了：


我快抓狂了...
再次把JS翻来覆去的改了N遍，得到的结果还是那样...
可是单独运行UserListGridPanel.jsp却是正常的啊！突然想到了点什么，上面不是说用autoLoad时，被载入的页面中可以不用再载入ExtJS库吗？而我现在的UserListGridPanel.jsp中还载入了ExtJS库，会不会和main.jsp中的发生冲突了？
结果当然不言而喻了。

Tags: , ,

Ext GridPanel数据分页 服务器数据交互

2009.02.21 , , No Comments , 3,144 浏览

昨天的GridPanel虽说较为完整了，不过却缺少了数据分页功能。今天又对其再次改进，使其可以进行数据分页。改动不是很大，只是对UserListGridPanel的数据源进行了修改并增加了分页条。

UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
//初始化数据添加组件和数据修改组件
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
//数据源
this['store'] = new Ext.data.Store({
url:UserListGridPanel.ACT_URL,
reader:new Ext.data.JsonReader({
root:'rows',
totalProperty:'count'
},
Ext.data.Record.create([
'UId','UName','UTrueName','UPassword'
]))
}),
UserListGridPanel.superclass.constructor.call(this,{
//将该列表渲染到网页的body中
renderTo:Ext.getBody(),
autoHeight:true,
bbar:new Ext.PagingToolbar({
pageSize:10,//每页数据大小
store:this.store
}),
width:300,
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(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
loadMask:{msg:'数据加载中...'},
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
//数据加载事件，向服务器递交查询参数，这里每次查询10条数据
this.getStore().load({params:{start:0,limit:10}});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
//更改本地数据
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
//提交更改
sr.commit();
},
//使用AJAX方式删除数据库及数据列表中的选中数据
remove:function(){
try{
var rc = this.getSelected();
Ext.Ajax.request({
url:'user.do?action=delUser',
params:rc.data
});
this.getStore().remove(rc);
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
//向列表中插入新数据
this.insert(r);
},
onUpdateWinSubmit:function(win,r){
//修改列表中选中的数据
this.update(r);
}
});
Tags: , ,