extJS

最新推荐文章于 2024-03-25 14:08:21 发布

转载最新推荐文章于 2024-03-25 14:08:21 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qingxinliwu/p/3217181.html

本文介绍了一个使用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();
                       }
            }
   }
});

转载于:https://www.cnblogs.com/qingxinliwu/p/3217181.html