Tag Archives: extjs api

#ux-taskbar {
background:transparent none;
height:30px;
margin:0;
padding:0;
position:relative;
z-index:12001;
}

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

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