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: '[e-mail]', phone: '555-111-1224' },
        { name: 'Bart', email: '[e-mail]', phone: '555-222-1234' },
        { name: 'Homer', email: '[e-mail]', phone: '555-222-1244' },
        { name: 'Marge', email: '[e-mail]', 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":"[e-mail]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[e-mail]",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"[e-mail]",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"[e-mail]", "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: '[e-mail]', phone: '555-111-1224'},
             { name: 'Bart', email: '[e-mail]', phone: '555-222-1234'},
             { name: 'Homer', email: '[e-mail]', phone: '555-222-1244'},
             { name: 'Marge', email: '[e-mail]', phone: '555-222-1254'},
             { name: 'Lisa', email: '[e-mail]', 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:{//请求参数


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