ExtJs中使用自定义事件

以下代码定义了一个用于更新文章或添加文章的窗体：

 

Code
  1Cms.ModifyArticleWindow = Ext.extend(Ext.Window, {
  2    title: '添加文章',
  3    modal: true,
  4    layout: 'fit',
  5    width: 650,
  6    height: 600,
  7    md: 'add',
  8    bufferResize: false,
  9
 10    initComponent: function() {
 11        var url = '/admin/addarticle';
 12        var categoryId = this.categoryId;
 13        var articleId;
 14        var title;
 15        var author;
 16        var isNewsPhotos = false;
 17        var photoUrl;
 18        var summary;
 19        var content;
 20
 21        if (this.md && this.md == 'update') {
 22            this.title = '修改文章';
 23            url = '/admin/updatearticle';
 24            articleId = this.article.Id;
 25            title = this.article.Title;
 26            author = this.article.Author;
 27            isNewsPhotos = this.article.IsNewsPhotos;
 28            photoUrl = this.article.PhotoUrl;
 29            summary = this.article.Summary;
 30            content = this.article.Content;
 31        }
 32
 33        var win = this;
 34        var update = this.onUpdate;
 35
 36        this.items = [{
 37            xtype: 'form',
 38            url: url,
 39            width: 640,
 40            height: 400,
 41            labelWidth: 50,
 42            monitorValid: true,
 43            frame: true,
 44            items: [{
 45                xtype: 'hidden',
 46                name: 'categoryId',
 47                value: categoryId
 48            }, {
 49                xtype: 'hidden',
 50                name: 'Id',
 51                value: articleId
 52            }, {
 53                xtype: "textfield",
 54                fieldLabel: "标题",
 55                name: 'title',
 56                anchor: "100%",
 57                allowBlank: false,
 58                value: title
 59            }, {
 60                xtype: "textfield",
 61                fieldLabel: "作者",
 62                name: 'author',
 63                anchor: "100%",
 64                value: author
 65            }, {
 66                layout: "column",
 67                items: [{
 68                    columnWidth: 0.3,
 69                    layout: "form",
 70                    items: {
 71                        xtype: "checkbox",
 72                        fieldLabel: "是否是图片新闻",
 73                        name: 'isNewsPhotos',
 74                        inputValue: true,
 75                        checked: isNewsPhotos
 76                    }
 77                }, {
 78                    columnWidth: 0.7,
 79                    layout: "form",
 80                    items: {
 81                        xtype: "textfield",
 82                        fieldLabel: "图片路径",
 83                        name: 'photoUrl',
 84                        anchor: "90%",
 85                        value: photoUrl
 86                    }
 87}]
 88                }, {
 89                    xtype: 'htmleditor',
 90                    fieldLabel: '摘要',
 91                    name: 'summary',
 92                    height: 100,
 93                    anchor: "98%",
 94                    value: summary
 95                }, {
 96                    xtype: 'htmleditor',
 97                    fieldLabel: '内容',
 98                    name: 'content',
 99                    height: 270,
100                    anchor: "98%",
101                    allowBlank: false,
102                    value: content
103}],
104                    buttons: [{
105                        text: '确定',
106                        formBind: true,
107                        handler: update,
108                        scope: win
109                    }, {
110                        text: '取消',
111                        handler: function() {
112                            win.close();
113                        }
114}]
115
116}];
117                        Cms.ModifyArticleWindow.superclass.initComponent.call(this);
118                        //定义了保存后执行的事件
119                        this.addEvents('afterSave');
120                    },
121                    onUpdate: function() {
122                        var win = this;
123                        var form = this.items.items[0].form;
124
125                        form.submit({
126                            method: 'POST',
127                            waitTitle: '',
128                            waitMsg: '正在处理',
129                            success: function(form, action) { 
130                                //返回结果后触发保存事件
131                                win.fireEvent('afterSave', win, win.md, true);
132                            },
133                            failure: function(form, action) {
134                                //返回结果后触发保存事件
135                                win.fireEvent('afterSave', win, win.md, true);
136
137                                if (action.failureType == 'server') {
138                                    obj = Ext.util.JSON.decode(action.response.responseText);
139                                    Ext.Msg.alert('更新失败!', obj.errors.reason);
140                                } else {
141                                    Ext.Msg.alert('警告!', '服务不可用 : ' + action.response.responseText);
142                                }
143
144                                form.reset();
145                            }
146                        });
147                    }
148                });

在文章列表Grid中，监听了当文章保存后的事件并处理：

 

Code
  1Cms.ArticleGrid = Ext.extend(Ext.ux.GridPanel, {
  2    title: '文章列表',
  3    paged: true,
  4    showCheckbox: true,
  5    region: 'center',
  6    autoScroll: true,
  7    cm: new Ext.grid.ColumnModel([new Ext.grid.CheckboxSelectionModel(), {
  8        header: '文章ID',
  9        width: 60,
 10        dataIndex: 'Id'
 11    }, {
 12        header: '标题',
 13        dataIndex: 'Title'
 14    }, {
 15        header: '发布状态',
 16        dataIndex: 'Published',
 17        width: 60,
 18        renderer: function(v, params, record) {
 19            return v ? '发布' : '<font color="red">未发布</font>';
 20        }
 21    }, {
 22        header: '是否删除',
 23        dataIndex: 'Deleted',
 24        width: 60,
 25        renderer: function(v, params, record) {
 26            return v ? '删除' : '<font color="red">正常</font>';
 27        }
 28    }, {
 29        header: '图片新闻',
 30        dataIndex: 'IsNewsPhotos',
 31        width: 60,
 32        renderer: function(v, params, record) {
 33            return v ? '否' : '<font color="red">是</font>';
 34        }
 35    }, {
 36        header: '创建日期',
 37        dataIndex: 'CreatedDatetime'
 38    }, {
 39        header: '更新日期',
 40        dataIndex: 'UpdatedDatetime'
 41}]),
 42        store: new Ext.data.Store({
 43            autoLoad: true,
 44            root: 'Articles',
 45            totalProperty: 'Total',
 46            idProperty: 'Id',
 47            proxy: new Ext.data.HttpProxy({
 48                url: '/admin/getarticlesbycategory',
 49                baseParams: {
 50                    categoryId: 0
 51                }
 52            }),
 53            reader: new Ext.data.JsonReader({
 54                root: 'Articles',
 55                id: 'Id'
 56            }, [{
 57                name: 'Id'
 58            }, {
 59                name: 'Title'
 60            }, {
 61                name: 'IsNewsPhotos'
 62            }, {
 63                name: 'PhotoUrl'
 64            }, {
 65                name: 'Content'
 66            }, {
 67                name: 'Summary'
 68            }, {
 69                name: 'Author'
 70            }, {
 71                name: 'Creator'
 72            }, {
 73                name: 'Template'
 74            }, {
 75                name: 'Modifier'
 76            }, {
 77                name: 'Published'
 78            }, {
 79                name: 'Deleted'
 80            }, {
 81                name: 'CreatedDatetime'
 82            }, {
 83                name: 'UpdatedDatetime'
 84}])
 85            }),
 86
 87            initComponent: function() {
 88                var grid = this;
 89                var add = this.onAdd;
 90                var update = this.onUpdate;
 91                var del = this.onDelete;
 92
 93                this.tbar = [{
 94                    text: '操作',
 95                    menu: {
 96                        items: [{
 97                            text: '添加',
 98                            handler: add,
 99                            scope: grid
100                        }, {
101                            text: '修改',
102                            handler: update,
103                            scope: grid
104                        }, {
105                            text: '删除',
106                            handler: del,
107                            scope: grid
108}]
109                        }
110}];
111                        Cms.ArticleGrid.superclass.initComponent.call(this);
112                    },
113                    onAdd: function() {
114                        var categoryId = this.category.getSelectionModel().getSelectedNode().id;
115                        var grid = this;
116
117                        if (categoryId > 0) {
118
119                            var win = new Cms.ModifyArticleWindow({
120                                categoryId: categoryId,
121                                listeners: {
122                                    afterSave: function(win, md, rt) {
123                                        if (rt) {
124                                            var form = win.items.items[0].form;
125                                            form.reset();
126                                            grid.store.reload();
127                                            Ext.Msg.alert('', '添加成功');
128                                        }
129                                    }
130                                }
131                            });
132
133                            win.show();
134                        }
135                    },
136                    onUpdate: function() {
137                        var grid = this;
138                        var article = this.getSelectionModel().getSelected().data;
139
140                        var win = new Cms.ModifyArticleWindow({
141                            md: 'update',
142                            article: article,
143                            listeners: {
144                                //监听保存事件并处理
145                                afterSave: function(win, md, rt) {
146                                    if (rt) {
147                                        grid.store.reload();
148                                        Ext.Msg.alert('', '更新成功');
149                                    }
150                                }
151                            }
152                        });
153
154                        win.show();
155                    },
156                    onDelete: function() {
157
158                    },
159                    loadByCategory: function(category) {
160                        this.store.baseParams = {
161                            categoryId: category
162                        };
163                        this.store.load({
164                            params: {
165                                start: 0,
166                                limit: 25
167                            }
168                        });
169                    }
170                }
171        );
172                Ext.reg('cms.articlegrid', Cms.ArticleGrid);

 

执行效果:

 

 

转载于:https://www.cnblogs.com/TerryLiang/archive/2009/03/20/1417926.html