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