随笔 - 17  文章 - 84  trackbacks - 0
<2007年11月>
日一二三四五六
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

如非特别说明，所有文章均为原创。如需引用，请注明出处
Email:liangtianyu@gmail.com
MSN:terry.liangtianyu@hotmail.com

常用链接

留言簿(4)

随笔分类(12)

随笔档案(17)

最新随笔

搜索

  •  

积分与排名

  • 积分 - 51484
  • 排名 - 960

最新评论

阅读排行榜

评论排行榜

Ext 2.0使用:组件开发模式
Ext 2.0中取消了组件的构造方法，你完全可以在initComponent中执行自己的构造逻辑。假如开发过
Asp.Net的控件，那么你应该比较熟悉这种开发模式。只要你了解Ext控件的各个方法的生命周期，调用模式，那么你可以随心所欲的继承和扩展Ext的组件，和开发自己的新的组件。
比如我们需要一个显示用户信息的Grid，那么在Ext 2.0中可以更加方便的实现。
以下代码是显示用户信息的GridPanel：
  1/**
  2 * @author Terry
  3 */
  4
  5EasyNet.UserGrid = Ext.extend(Ext.grid.GridPanel, {
  6    serviceURL: '',
  7    loadMask: {
  8        msg: '加载用户信息'
  9    },
 10    viewConfig: {
 11        forceFit: true
 12    },
 13    
 14    initComponent: function(){
 15        var url = this.serviceURL;
 16        
 17        this.store = new Ext.data.Store({
 18            proxy: new Ext.data.HttpProxy({
 19                url: url + '/QueryUser'
 20            }),
 21            baseParams: {
 22                fields: '*',
 23                filter: 'Status=1'
 24            },
 25            reader: new Ext.data.XmlReaderEx({
 26                root: 'User',
 27                totalRecords: 'Count',
 28                record: 'UserData',
 29                id: 'ID'
 30            }, [
 31                {name: 'LoginName', mapping: 'LoginName'},
 32                {name: 'UserName', mapping: 'UserName'},
 33                {name: 'Sex', type: 'int', mapping: 'Sex'},
 34                {name: 'RegDate', type: 'date', format: 'Y-m-d', mapping: 'RegDate'}
 35            ])
 36        });
 37        
 38        this.cm = new Ext.grid.ColumnModel([{
 39            header: '登录名称',
 40            dataIndex: 'LoginName'
 41        },{
 42            header: '用户名称',
 43            dataIndex: 'UserName'
 44        }, {
 45            header: '用户姓名',
 46            dataIndex: 'UserName'
 47        }, {
 48            header: '性别', 
 49            dataIndex: 'Sex',
 50            renderer: function(v, params, data){
 51                if(v == 1){
 52                    return '男';
 53                }
 54                
 55                return '女';
 56            }
 57        }, {
 58            header: '注册时间', 
 59            dataIndex: 'RegDate'
 60        }]);
 61        
 62        this.cm.defaultSortable = true;
 63        
 64        var searchBtn = new Ext.Button({
 65            text: '查找'
 66        });
 67        var delBtn = new Ext.Button({
 68            text: '删除'
 69        });
 70        
 71        searchBtn.on('click', this.onSearch, this);
 72        delBtn.on('click', this.onDelete, this);
 73        
 74        this.tbar = [searchBtn, delBtn];
 75        
 76        var store = this.store;
 77        
 78        this.bbar = new Ext.PagingToolbarEx({
 79            store: store,
 80            displayMsg: '显示用户信息 {0} - {1} / {2}',
 81            emptyMsg: '没有用户信息',
 82            paramNames: {
 83                start: 'pageIndex',
 84                limit: 'pageSize'
 85            }
 86        });
 87        
 88        EasyNet.UserGrid.superclass.initComponent.call(this);
 89    },
 90    
 91    loadData: function(){
 92        var params = Ext.util.JSON.decode(Ext.util.JSON.encode(this.store.baseParams));
 93        params.pageIndex = 1;
 94        params.pageSize = 20;
 95        this.store.load({params: params});
 96    },
 97    
 98    onSearch: function(){
 99        if(!this.searchWindow){
100            this.searchWindow = new EasyNet.SearchUserWindow({
101                searchTo:this
102            });
103        }
104        
105        this.searchWindow.show();
106    },
107    
108    onDelete: function(){
109        var sls = this.getSelections();
110        var count = sls.length;
111        
112        if(count == 0){
113            return;
114        }
115        
116        var surl = this.serviceURL;
117        var grid = this;
118        
119        Ext.Msg.show({
120            title: '确认删除用户',
121            msg: '确实要删除所选用户吗?',
122            buttons: Ext.Msg.YESNO,
123            icon: Ext.Msg.WARNING,
124            fn: function(btn, text){
125                if(btn == 'yes'){
126                    var filter = '';
127                    
128                    for(var i = 0; i < count; i ++){
129                        if(i == 0){
130                            filter = new String(sls[0].id);
131                        }
132                        else{
133                            filter = filter + ',' + sls[i].id;
134                        }
135                    }
136                    
137                    var store = new Ext.data.Store({
138                        proxy: new Ext.data.HttpProxy({
139                            url: surl + '/DeleteUser'
140                        })
141                    });
142                                
143                    store.load({params: {filter: 'ID IN(' + filter +')'}});
144                    grid.loadData();
145                }
146            }
147        });
148    }
149});
150
151Ext.reg('easynetusergrid', EasyNet.UserGrid);

以下是查找用户对话窗体：
  1/**
  2 * @author Terry
  3 */
  4
  5EasyNet.SearchUserWindow = Ext.extend(Ext.Window, {
  6    width: 350,
  7    height: 250,
  8       resizable: false,
  9    layout: 'form',
 10    plain: true,
 11    bodyStyle: 'padding:5px;',
 12    buttonAlign: 'right',
 13    modal:true,
 14    title: '查找用户',
 15    closeAction: 'hide',
 16    buttons: [{
 17        text: '确定'
 18    }, {
 19        text: '取消'
 20    }],
 21    
 22    initComponent: function(){
 23        this.items = [{
 24            layout: 'column',
 25            baseCls: 'x-plain',
 26            items: [{
 27                columnWidth:0.08,
 28                layout: 'form',
 29                baseCls: 'x-plain',
 30                items: [{
 31                    hideLabel: true,
 32                    xtype: 'checkbox',
 33                    name: 'ckLoginName'
 34                }, {
 35                    hideLabel: true,
 36                    xtype: 'checkbox',
 37                    name: 'ckUserName'
 38                }, {
 39                    hideLabel: true,
 40                    xtype: 'checkbox',
 41                    name: 'ckDate'
 42                }]
 43            }, {
 44                columnWidth: 0.8,
 45                layout: 'form',
 46                baseCls: 'x-plain',
 47                items: [{
 48                    xtype: 'textfield',
 49                    fieldLabel: '登录名称',
 50                    emptyText: '登录名称',
 51                    maxLength: 50,
 52                    name: 'loginName'
 53                }, {
 54                    xtype: 'textfield',
 55                    fieldLabel: '用户名称',
 56                    emptyText: '用户名称',
 57                    maxLength: 50,
 58                    name: 'userName'
 59                }, {
 60                    xtype: 'datefield',
 61                    fieldLabel: '起始时间',
 62                    emptyText: '年-月-日',
 63                    format: 'Y-m-d',
 64                    width: 130,
 65                    name: 'bDate'
 66                }, {
 67                    xtype: 'datefield',
 68                    fieldLabel: '起始时间',
 69                    emptyText: '年-月-日',
 70                    format: 'Y-m-d',
 71                    width: 130,
 72                    name: 'eDate'
 73                }]
 74            }]
 75        }];
 76        
 77        Easy.SearchUserWindow.superclass.initComponent.call(this);
 78    },
 79    
 80    onRender: function(ct, position){
 81        EasyNet.SearchUserWindow.superclass.onRender.call(this, ct, position);
 82        this.buttons[0].on('click', this.onSearch, this);
 83        this.buttons[1].on('click', this.onCancel, this);
 84        
 85    },
 86    
 87    onSearch: function(){
 88        this.loadData();
 89    },
 90    
 91    onCancel: function(){
 92        if(this.closeAction == 'hide'){
 93            this.hide();
 94        }
 95        else if(this.closeAction == 'close'){
 96            this.close();
 97        }
 98    },
 99    
100    getValue: function(){
101        return {
102            ckLoginName: this.find('name', 'ckLoginName')[0].getValue(),
103            ckUserName: this.find('name', 'ckUserName')[0].getValue(),
104            loginName: this.find('name', 'loginName')[0].getValue(),
105            userName: this.find('name', 'userName')[0].getValue(),
106            bDate: this.find('name', 'bDate')[0].getValue(),
107            eDate: this.find('name', 'eDate')[0].getValue()
108        }
109    },
110    
111    getCondition: function(){
112        var o = this.getValue();
113        var filter ='Status=1';
114        
115        if(o.ckLoginName && o.LoginName != ''){
116            filter += String.format(' AND LoginName LIKE \'%{0}%\'', o.loginName);
117        }
118        if(o.ckUserName && o.userName != ''){
119            filter += String.format(' AND UserName LIKE \'%{0}%\'', o.userName);
120        }
121        if(o.ckDate && o.bDate != '' && o.eDate != '' && o.eDate >= o.bDate){
122            filter += String.format(' AND RegDate BETWEEN \'{0}\' AND \'{1}\'', o.bDate, o.eDate);
123        }
124        
125        return {
126            fields: '*',
127            filter: filter
128        }
129    },
130    
131    loadData: function(){
132        if(this.searchTo){
133            this.searchTo.store.baseParams = this.getCondition();
134            this.searchTo.loadData();
135        }
136        
137        this.onCancel();
138    }
139});

在实际应用中所有数据调用.Net写的Web Service取得。
posted on 2007-11-12 17:42 Terry Liang 阅读(5657) 评论(6)  编辑  收藏 所属分类: Ext

FeedBack:
# re: Ext 2.0使用:组件开发模式 2007-11-13 09:10 itVincent
excellent,最近也在做ext的研究与开发,需要扩展tree与window,能留个联系方式吗?这是我的email:itvincent@126.com  回复  更多评论
  
# re: Ext 2.0使用:组件开发模式 2007-11-13 10:18 Terry Liang
@itVincent
Name:梁天语
Email:liangtianyu@gmail.com
MSN:terry.liangtianyu@hotmail.com
Mobilephone:13811152082

希望在技术方面多多交流！  回复  更多评论
  
# re: Ext 2.0使用:组件开发模式 2007-11-13 11:22 虎啸龙吟
具体怎么使用你构建的新组件呢？给个例子如何？  回复  更多评论
  
# re: Ext 2.0使用:组件开发模式 2007-11-13 13:15 Terry Liang
@虎啸龙吟
我的本意是在组件中封装逻辑，在调用时直接使用就可以了。
比如可以定义一个菜单，点击某项就显示用户信息，那么直接new一个就可以了。
当然具体的使用还要看具体的需求和环境。可以仔细看看Ext给的例子。  回复  更多评论
  
# re: Ext 2.0使用:组件开发模式 2007-11-15 19:40 虎啸龙吟
我这里也有一段代码,是从Ext 论坛上摘下来的，实现用form当window来使用，我就是不能调用继承下来的类，请帮我实现一下：谢了.

ComplainFormWindow= function(){
this.complainForm= new Ext.form.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'ComplainControlLayer.aspx',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 500,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
xtype:'fieldset',
title: 'Personal Information',
autoHeight:true,
items: [{
xtype:'textfield',
fieldLabel: '<b>First Name</b>',
name: 'fName',
allowBlank:false,
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: '<b>Middle Name</b>',
name: 'mName',
anchor:'95%'
}
,
{
xtype:'textfield',
fieldLabel: '<b>Last Name</b>',
allowBlank:false,
name: 'lName',
anchor:'95%'
},
{
xtype:'textfield',
fieldLabel: '<b>E-mail Add</b>',
name: 'e-mail',
allowBlank:true,
vtype:'email',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
xtype:'fieldset',
title: '<b>Personal Information</b>',
labelWidth:60,
autoHeight:true,
items: [{
xtype:'textfield',
fieldLabel: '<b>Address</b>',
allowBlank:false,
name: 'address',
anchor:'95%'
},
{
xtype:'textfield',
fieldLabel: '<b>Ward No</b>',
allowBlank:false,
name: 'ward',
anchor:'95%'
}]
}]
},{
layout:'column',
xtype:'fieldset',
title:'<b>Other Information</b>',
autoHeight:true,
items:[{
columnWidth:.5,
layout: 'form',
autoHeight:true,
items: [this.deptCombo]
},{
columnWidth:.5,
layout: 'form',
labelWidth:50,
autoHeight:true,
items: [{
xtype:'textfield',
fieldLabel: '<b>Subject</b>',
name: 'subject',
allowBlank:false,
anchor:'95%'
}]
}]
}
,{
layout: 'form',
xtype:'fieldset',
title: '<b>Insert Comment</b>',
autoHeight:true,
items:[{
xtype:'textarea',
name:'comment',
allowBlank:false,
hideLabel:true,
height:120,
anchor:'98%'
}]

}],
buttons: [{
text: 'Save',
handler:this.formSubmit,
scope:this
},{
text: 'Cancel',
handler: function(){
this.hide();
},
scope:this

}]


});
ComplainFormWindow.superclass.constructor.call(this, {
title: 'Layout Window',
closable:true,
width:800,
height:475,
closeAction:'hide',
layout: 'fit',
items:this.complainForm
});
}
Ext.extend(ComplainFormWindow,Ext.Window,{
formSubmit: function(){

if(this.complainForm.form.isValid())
{
this.complainForm.form.submit({params:{
requestData: 'addnewcomplain'},
failure: function() {
// Ext.MessageBox.alert('Error Message',"fail");
alert('h');
},
success: function() {
//win.close();
}
});
}
else{
Ext.Msg.alert('Complain Submit', 'Enter the Field');


}

}
});  回复  更多评论
  
# re: Ext 2.0使用:组件开发模式 2007-11-16 08:26 Terry Liang
@虎啸龙吟
请把问题描述的尽可能详细。可否把你写的相关代码发到我的邮箱？
  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 Terry Liang Powered by: 博客园 模板提供：沪江博客