ExtJs中使用自定义事件

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

 

  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,
                    anchor: "98%",
                    allowBlank: false,
                    value: content
}],
                    buttons: [{
                        text: '确定',
                        formBind: true,
                        handler: update,
                        scope: win
                    }, {
                        text: '取消',
                        handler: function() {
                            win.close();
                        }
}]

}];
                        Cms.ModifyArticleWindow.superclass.initComponent.call(this);
                        //定义了保存后执行的事件
                        this.addEvents('afterSave');
                    },
                    onUpdate: function() {
                        var win = this;
                        var form = this.items.items[0].form;

                        form.submit({
                            method: 'POST',
                            waitTitle: '',
                            waitMsg: '正在处理',
                            success: function(form, action) { 
                                //返回结果后触发保存事件
                                win.fireEvent('afterSave', win, win.md, true);
                            },
                            failure: function(form, action) {
                                //返回结果后触发保存事件
                                win.fireEvent('afterSave', win, win.md, true);

                                if (action.failureType == 'server') {
                                    obj = Ext.util.JSON.decode(action.response.responseText);
                                    Ext.Msg.alert('更新失败!', obj.errors.reason);
                                } else {
                                    Ext.Msg.alert('警告!', '服务不可用 : ' + action.response.responseText);
                                }

                                form.reset();
                            }
                        });
                    }
                });

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

 

  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
                        }, {
                            text: '修改',
                            handler: update,
                            scope: grid
                        }, {
                            text: '删除',
                            handler: del,
                            scope: grid
}]
                        }
}];
                        Cms.ArticleGrid.superclass.initComponent.call(this);
                    },
                    onAdd: function() {
                        var categoryId = this.category.getSelectionModel().getSelectedNode().id;
                        var grid = this;

                        if (categoryId > 0) {

                            var win = new Cms.ModifyArticleWindow({
                                categoryId: categoryId,
                                listeners: {
                                    afterSave: function(win, md, rt) {
                                        if (rt) {
                                            var form = win.items.items[0].form;
                                            form.reset();
                                            grid.store.reload();
                                            Ext.Msg.alert('', '添加成功');
                                        }
                                    }
                                }
                            });

                            win.show();
                        }
                    },
                    onUpdate: function() {
                        var grid = this;
                        var article = this.getSelectionModel().getSelected().data;

                        var win = new Cms.ModifyArticleWindow({
                            md: 'update',
                            article: article,
                            listeners: {
                                //监听保存事件并处理
                                afterSave: function(win, md, rt) {
                                    if (rt) {
                                        grid.store.reload();
                                        Ext.Msg.alert('', '更新成功');
                                    }
                                }
                            }
                        });

                        win.show();
                    },
                    onDelete: function() {

                    },
                    loadByCategory: function(category) {
                        this.store.baseParams = {
                            categoryId: category
                        };
                        this.store.load({
                            params: {
                                start: 0,
                                limit: 25
                            }
                        });
                    }
                }
        );
                Ext.reg('cms.articlegrid', Cms.ArticleGrid);

 

执行效果: