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

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

          常用鏈接

          留言簿(4)

          隨筆分類(12)

          隨筆檔案(17)

          最新隨筆

          搜索

          •  

          積分與排名

          • 積分 - 51901
          • 排名 - 962

          最新評論

          閱讀排行榜

          評論排行榜

          Ext 2.0中取消了組件的構(gòu)造方法,你完全可以在initComponent中執(zhí)行自己的構(gòu)造邏輯。假如開發(fā)過
          Asp.Net的控件,那么你應(yīng)該比較熟悉這種開發(fā)模式。只要你了解Ext控件的各個方法的生命周期,調(diào)用模式,那么你可以隨心所欲的繼承和擴展Ext的組件,和開發(fā)自己的新的組件。
          比如我們需要一個顯示用戶信息的Grid,那么在Ext 2.0中可以更加方便的實現(xiàn)。
          以下代碼是顯示用戶信息的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: '確認(rèn)刪除用戶',
          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}
          );

          在實際應(yīng)用中所有數(shù)據(jù)調(diào)用.Net寫的Web Service取得。
          posted on 2007-11-12 17:42 Terry Liang 閱讀(5676) 評論(6)  編輯  收藏 所屬分類: Ext

          FeedBack:
          # re: Ext 2.0使用:組件開發(fā)模式 2007-11-13 09:10 itVincent
          excellent,最近也在做ext的研究與開發(fā),需要擴展tree與window,能留個聯(lián)系方式嗎?這是我的email:itvincent@126.com  回復(fù)  更多評論
            
          # re: Ext 2.0使用:組件開發(fā)模式 2007-11-13 10:18 Terry Liang
          @itVincent
          Name:梁天語
          Email:liangtianyu@gmail.com
          MSN:terry.liangtianyu@hotmail.com
          Mobilephone:13811152082

          希望在技術(shù)方面多多交流!  回復(fù)  更多評論
            
          # re: Ext 2.0使用:組件開發(fā)模式 2007-11-13 11:22 虎嘯龍吟
          具體怎么使用你構(gòu)建的新組件呢?給個例子如何?  回復(fù)  更多評論
            
          # re: Ext 2.0使用:組件開發(fā)模式 2007-11-13 13:15 Terry Liang
          @虎嘯龍吟
          我的本意是在組件中封裝邏輯,在調(diào)用時直接使用就可以了。
          比如可以定義一個菜單,點擊某項就顯示用戶信息,那么直接new一個就可以了。
          當(dāng)然具體的使用還要看具體的需求和環(huán)境。可以仔細(xì)看看Ext給的例子。  回復(fù)  更多評論
            
          # re: Ext 2.0使用:組件開發(fā)模式 2007-11-15 19:40 虎嘯龍吟
          我這里也有一段代碼,是從Ext 論壇上摘下來的,實現(xiàn)用form當(dāng)window來使用,我就是不能調(diào)用繼承下來的類,請幫我實現(xiàn)一下:謝了.

          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');


          }

          }
          });  回復(fù)  更多評論
            
          # re: Ext 2.0使用:組件開發(fā)模式 2007-11-16 08:26 Terry Liang
          @虎嘯龍吟
          請把問題描述的盡可能詳細(xì)。可否把你寫的相關(guān)代碼發(fā)到我的郵箱?
            回復(fù)  更多評論
            

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


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 康马县| 开封市| 丰顺县| 长丰县| 称多县| 清水河县| 观塘区| 游戏| 扎囊县| 文山县| 夏邑县| 蚌埠市| 阜康市| 福鼎市| 龙游县| 蒲城县| 砀山县| 防城港市| 荆州市| 闻喜县| 遂平县| 习水县| 区。| 托克托县| 确山县| 阜新| 大埔区| 右玉县| 秦皇岛市| 博白县| 北流市| 中江县| 柳江县| 广汉市| 安陆市| 白山市| 盈江县| 郧西县| 侯马市| 龙川县| 东城区|