ExtJS 表格 树结构

Ext.require(['*']);
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:Ext.getBody(),
//selType:'cellmodel',//ѡ��ij����Ԫ��
store:userStore,
width:400,
height:200,
title:'Application Users',
columns:[
{
text:'Name',
width:100,
sortable:false,
hideable:false,
dataIndex:'name'
},{
text:'Email Address',
width:150,
dataIndex:'email',
//format the email address using a custom renderer
renderer:function(value){
return Ext.String.format('<a href="mailto:{0}">{1}</a>',value,value);
},
hidden:false
},{
text:'Phone Number',
flex:1,
dataIndex:'phone'
}
]
});


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name',field:'textfield' },
{ header: 'Email', dataIndex: 'email', flex: 1 ,
/**�ɱ༭��Ԫ��*/
field:{
xtype:'textfield',
allowBlank:false
}},
{ header: 'Phone', dataIndex: 'phone' }
],
// selType:'cellmodel',//����ѡ�е�Ԫ��
selType:'rowmodel',
plugins:[
Ext.create('Ext.grid.plugin.RowEditing',{
clickToEdit:1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

//Grouping
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'senority', 'department'],
groupField: 'department',
data: {'employees':[
{ "name": "Michael Scott", "senority": 7, "department": "Manangement" },
{ "name": "Dwight Schrute", "senority": 2, "department": "Sales" },
{ "name": "Jim Halpert", "senority": 3, "department": "Sales" },
{ "name": "Kevin Malone", "senority": 4, "department": "Accounting" },
{ "name": "Angela Martin", "senority": 5, "department": "Accounting" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'employees'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Senority', dataIndex: 'senority' }
],
features: [{ftype:'grouping'}],
width: 200,
height: 275,
renderTo: Ext.getBody()
});
//paging
var itemsPerPage=2;
var userStorePage = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad:true,
pageSize:itemsPerPage,
data: {
"success": true,
"total": 12,
'users':
[
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'},
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234'},
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244'},
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254'},
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users',
totalProperty:'total'
}
}
});

// specify segment of data you want to load using params
userStorePage.load({
params:{
start:0,
limit: itemsPerPage
}
});
/**�������userStorePage Ч��һ��
* var userStorePage = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url : 'MyData/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});
* */
Ext.create('Ext.grid.Panel',{
store:userStorePage,
columns:[
{
text:'Name',
width:100,
sortable:false,
hideable:false,
dataIndex:'name'
},{
text:'Email Address',
width:150,
dataIndex:'email',
//format the email address using a custom renderer
renderer:function(value){
return Ext.String.format('<a href="mailto:{0}">{1}</a>',value,value);
},
hidden:false
},{
text:'Phone Number',
flex:1,
dataIndex:'phone'
}
],
dockedItems:[{
xtype:'pagingtoolbar',
store:userStorePage,
dock:'bottom',
displayInfo:true
}],
renderTo: Ext.getBody()
});
//tree
Ext.create('Ext.tree.Panel',{
renderTo:Ext.getBody(),
title:'Simple Tree',
width:150,
root:{
text:'Root',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
},{
text:'child 3',
expanded:true,
children:[
{
text:'Grandchild',
leaf:true
}
]
}
]
}
});
var treeStore=Ext.create('Ext.data.TreeStore',{
root:{
text:'Root treeStore',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
},{
text:'child 3',
expanded:true,
children:[
{
text:'Grandchild',
leaf:true
}
]
}
]
}
});
Ext.create('Ext.tree.Panel',{
renderTo:Ext.getBody(),
title:'treeStore',
width:150,
store:treeStore,
useArrows:true//�Ӻš���> ��ͷ
});

//add nodes to the tree
var tree=Ext.create('Ext.tree.Panel', {renderTo:Ext.getBody(),useArrows:true});
tree.setRootNode({
text:'Root',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
}
]
});
var root=tree.getRootNode();
var parent=root.appendChild({text:'Parent 1'});
parent.appendChild({
text:'child 3',
leaf:true
});
var child = parent.insertChild(0, {
text: 'Child 2.5',
leaf: true
});
parent.insertBefore({
text: 'Child 2.75',
leaf: true
}, child.nextSibling);
parent.expand();


//异步加载tree
var asyRoot=new Ext.tree.AsyncTreeNode({
expanded:true,
text:'系统菜单',
id:'',//
draggable:false,
iconCls:'b'
});

var asyTree=new Ext.tree.TreePanel({
title:'树形结构',
root:asyRoot,
border:false,
autoHeight:true,
renderTo:Ext.getBody(),
autoScroll:true,
animate:true,//允许使用动画展开 折叠
enableDD:true,//允许拖放
containerScroll:true,//登记本容器ScrollManager
listeners:{//在加载之前监听一个事件
'beforeload':function(data){
node.loader=new Ext.tree.TreeLoader({
url:'viewtree.do?id='+node.id,//请求路径
baseParams:{//请求参数


}
});
}
}
});
});