<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆 - 17  文章 - 84  trackbacks - 0
    <2007年11月>
    28293031123
    45678910
    11121314151617
    18192021222324
    2526272829301
    2345678

    如非特別說明,所有文章均為原創。如需引用,請注明出處
    Email:liangtianyu@gmail.com
    MSN:terry.liangtianyu@hotmail.com

    常用鏈接

    留言簿(4)

    隨筆分類(12)

    隨筆檔案(17)

    最新隨筆

    搜索

    •  

    積分與排名

    • 積分 - 51856
    • 排名 - 961

    最新評論

    閱讀排行榜

    評論排行榜

    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 閱讀(5673) 評論(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
    @虎嘯龍吟
    請把問題描述的盡可能詳細。可否把你寫的相關代碼發到我的郵箱?
      回復  更多評論
      

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 狠狠亚洲婷婷综合色香五月排名| 国产AV无码专区亚洲AV麻豆丫| 亚洲裸男gv网站| 午夜宅男在线永久免费观看网| 免费一级毛片无毒不卡| 一边摸一边桶一边脱免费视频| 2020亚洲男人天堂精品| 久久亚洲AV成人出白浆无码国产| 久久久无码精品亚洲日韩软件| 国产精品久久亚洲不卡动漫| 国产V亚洲V天堂无码久久久| 亚洲国产精品尤物yw在线| 日韩免费福利视频| 毛片在线看免费版| 国产精品偷伦视频免费观看了| 亚洲乱色伦图片区小说| 亚洲AV无码乱码麻豆精品国产| 免费中文字幕一级毛片| 免费看的一级毛片| 成人免费毛片内射美女APP| 2021免费日韩视频网| 精品在线免费视频| 亚洲精品国产精品| 亚洲JIZZJIZZ妇女| 色偷偷尼玛图亚洲综合| 亚洲精品天堂无码中文字幕| 亚洲一本一道一区二区三区| 亚洲久悠悠色悠在线播放| 久久久久久A亚洲欧洲AV冫| 亚洲成人高清在线| 亚洲中文字幕伊人久久无码| 久久久青草青青国产亚洲免观 | www.999精品视频观看免费| 1000部无遮挡拍拍拍免费视频观看| 毛片免费在线观看| 未满十八18禁止免费无码网站| 免费播放一区二区三区| 2021精品国产品免费观看| 67194熟妇在线永久免费观看| 美女视频黄a视频全免费| 99麻豆久久久国产精品免费|