extJS
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout:'border',
items:[{
region: 'south',
xtype: 'panel',
height: 20,
split: false,
html: '版权所有!',
margins: '5 5 5 5'
},{
region:'north',
xtype:'panel',
height:20,
split:false,
html:'欢迎登陆',
margins:'5 5 0 5'
},{
region:'west',
xtype:'panel',
width:200,
split:false,
margins:'5 0 0 5',
items:[tree]
},{
region:'east',
xtype:'panel',
width:300,
split:false,
margins:'5 5 0 0',
html:'<div id="detailInfor"></div>'
},{
region:'center',
xtype:'panel',
split:false,
margins:'5 5 0 5',
items:[grid]
}]
});
});
Ext.create('Ext.data.TreeStore',{
storeId:'treeInfor',
root:{
text:'科大国创',
expanded:true,
children: [
{ text: "通用部", expanded: true, children: [
{ text: "通用一部", leaf: true ,part:'1'},
{ text: "通用二部", leaf: true,part:'2'},
{ text: "通用三部", leaf: true,part:'3'}
] },
{ text: "全球部",expanded: false},
{ text: "金融部",expanded: false}
]
}
});
Ext.create('Ext.data.Store', {
storeId:'userInfor',
fields:['uid','name', 'email', 'phone','apart'],
data: [
{'uid':'1','name': 'Lisa1', "email":"lisa@simpsons.com", "phone":"555-111-1224",'apart':'1'},
{'uid':'1','name': 'Bart1', "email":"bart@simpsons.com", "phone":"555-222-1234" ,'apart':'1'},
{'uid':'3', 'name': 'Homer2', "email":"home@simpsons.com", "phone":"555-222-1244",'apart':'2'},
{'uid':'4','name': 'Marge2', "email":"marge@simpsons.com", "phone":"555-222-1254",'apart':'2'},
{'uid':'3', 'name': 'Homer3', "email":"home@simpsons.com", "phone":"555-222-1244",'apart':'3'},
{'uid':'4','name': 'Marge3', "email":"marge@simpsons.com", "phone":"555-222-1254",'apart':'3'}
]
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'userInforGird',
store: Ext.data.StoreManager.lookup('userInfor'),
columns: [
{ header:'Name', dataIndex: 'name' },
{ header:'Email', dataIndex: 'email'},
{ header:'Phone', dataIndex: 'phone'}
],
listeners:{
//单击
itemclick : function(grid,record){
var str = '<label>姓名: </label>'+record.get("name")+'<br/>';
str += '<label>Eamil: </label>'+record.get("email")+'<br/>';
str += '<label>Phone: </label>'+record.get("phone")+'<br/>';
str += '<label>性别: </label>男<br/>';
str += '<label>年龄: </label>23<br/>';
Ext.DomHelper.overwrite('detailInfor',str);
},
//双击
itemdblclick:function(grid,record){
var editwin = Ext.create('Ext.window.Window', {
title : 'Edit User',
layout : 'fit',
//autoShow: true,
items : [{
xtype : 'form',
items : [{
xtype : 'textfield',
name : 'name',
fieldLabel : 'Name'
}, {
xtype : 'textfield',
name : 'email',
fieldLabel : 'Email'
}, {
xtype : 'textfield',
name : 'phone',
fieldLabel : 'Phone'
}
]
}
],
buttons : [{
text : 'Save',
handler : function (button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
}
},
],
});
editwin.down('form').loadRecord(record);
editwin.show();
}
}
});
var tree = Ext.create('Ext.tree.Panel', {
title: 'treeInfor',
store: Ext.data.StoreManager.lookup('treeInfor'),
width: 400,
listeners: {
itemclick:function(view,record,item,index,e,eOpts){
//Ext.Msg.alert("notice",Ext.data.StoreManager.lookup('treeInfor').items[0].get("text"));
if(record.get('text')=='通用一部')
{
Ext.data.StoreManager.lookup('userInfor').filterBy(function(record) {return record.get('apart')=='1'});
}
else if(record.get('text')=='通用二部')
{
Ext.data.StoreManager.lookup('userInfor').filterBy(function(record) {return record.get('apart')=='2'});
}
else if(record.get('text')=='通用三部')
{
Ext.data.StoreManager.lookup('userInfor').filterBy(function(record) {return record.get('apart')=='3'});
}
else
{
Ext.data.StoreManager.lookup('userInfor').clearFilter();
}
}
}
});