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

Code
1
Cms.ModifyArticleWindow = Ext.extend(Ext.Window,
{
2
title: '添加文章',
3
modal: true,
4
layout: 'fit',
5
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
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
1
Cms.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
60,
10
dataIndex: 'Id'
11
},
{
12
header: '标题',
13
dataIndex: 'Title'
14
},
{
15
header: '发布状态',
16
dataIndex: 'Published',
17
60,
18
renderer: function(v, params, record)
{
19
return v ? '发布' : '<font color="red">未发布</font>';
20
}
21
},
{
22
header: '是否删除',
23
dataIndex: 'Deleted',
24
60,
25
renderer: function(v, params, record)
{
26
return v ? '删除' : '<font color="red">正常</font>';
27
}
28
},
{
29
header: '图片新闻',
30
dataIndex: 'IsNewsPhotos',
31
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);
执行效果:
