以下代码定义了一个用于更新文章或添加文章的窗体:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Cms.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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
var win = this;
34
var update = this.onUpdate;
35![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.items = [
{
37
xtype: 'form',
38
url: url,
39
width: 640,
40
height: 400,
41
labelWidth: 50,
42
monitorValid: true,
43
frame: true,
44![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [
{
45
xtype: 'hidden',
46
name: 'categoryId',
47
value: categoryId
48![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
49
xtype: 'hidden',
50
name: 'Id',
51
value: articleId
52![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
53
xtype: "textfield",
54
fieldLabel: "标题",
55
name: 'title',
56
anchor: "100%",
57
allowBlank: false,
58
value: title
59![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
60
xtype: "textfield",
61
fieldLabel: "作者",
62
name: 'author',
63
anchor: "100%",
64
value: author
65![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
66
layout: "column",
67![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [
{
68
columnWidth: 0.3,
69
layout: "form",
70![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items:
{
71
xtype: "checkbox",
72
fieldLabel: "是否是图片新闻",
73
name: 'isNewsPhotos',
74
inputValue: true,
75
checked: isNewsPhotos
76
}
77![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
78
columnWidth: 0.7,
79
layout: "form",
80![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items:
{
81
xtype: "textfield",
82
fieldLabel: "图片路径",
83
name: 'photoUrl',
84
anchor: "90%",
85
value: photoUrl
86
}
87
}]
88![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
89
xtype: 'htmleditor',
90
fieldLabel: '摘要',
91
name: 'summary',
92
height: 100,
93
anchor: "98%",
94
value: summary
95![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
96
xtype: 'htmleditor',
97
fieldLabel: '内容',
98
name: 'content',
99
height: 270,
100
anchor: "98%",
101
allowBlank: false,
102
value: content
103
}],
104![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
buttons: [
{
105
text: '确定',
106
formBind: true,
107
handler: update,
108
scope: win
109![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
110
text: '取消',
111![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
handler: function()
{
112
win.close();
113
}
114
}]
115![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
116
}];
117
Cms.ModifyArticleWindow.superclass.initComponent.call(this);
118
//定义了保存后执行的事件
119
this.addEvents('afterSave');
120
},
121![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onUpdate: function()
{
122
var win = this;
123
var form = this.items.items[0].form;
124![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
125![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
form.submit(
{
126
method: 'POST',
127
waitTitle: '',
128
waitMsg: '正在处理',
129![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
success: function(form, action)
{
130
//返回结果后触发保存事件
131
win.fireEvent('afterSave', win, win.md, true);
132
},
133![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
failure: function(form, action)
{
134
//返回结果后触发保存事件
135
win.fireEvent('afterSave', win, win.md, true);
136![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
137![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (action.failureType == 'server')
{
138
obj = Ext.util.JSON.decode(action.response.responseText);
139
Ext.Msg.alert('更新失败!', obj.errors.reason);
140![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
141
Ext.Msg.alert('警告!', '服务不可用 : ' + action.response.responseText);
142
}
143![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
144
form.reset();
145
}
146
});
147
}
148
});
在文章列表Grid中,监听了当文章保存后的事件并处理:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Cms.ArticleGrid = Ext.extend(Ext.ux.GridPanel,
{
2
title: '文章列表',
3
paged: true,
4
showCheckbox: true,
5
region: 'center',
6
autoScroll: true,
7![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
cm: new Ext.grid.ColumnModel([new Ext.grid.CheckboxSelectionModel(),
{
8
header: '文章ID',
9
width: 60,
10
dataIndex: 'Id'
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
12
header: '标题',
13
dataIndex: 'Title'
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
15
header: '发布状态',
16
dataIndex: 'Published',
17
width: 60,
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
renderer: function(v, params, record)
{
19
return v ? '发布' : '<font color="red">未发布</font>';
20
}
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
22
header: '是否删除',
23
dataIndex: 'Deleted',
24
width: 60,
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
renderer: function(v, params, record)
{
26
return v ? '删除' : '<font color="red">正常</font>';
27
}
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
29
header: '图片新闻',
30
dataIndex: 'IsNewsPhotos',
31
width: 60,
32![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
renderer: function(v, params, record)
{
33
return v ? '否' : '<font color="red">是</font>';
34
}
35![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
36
header: '创建日期',
37
dataIndex: 'CreatedDatetime'
38![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
39
header: '更新日期',
40
dataIndex: 'UpdatedDatetime'
41
}]),
42![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
store: new Ext.data.Store(
{
43
autoLoad: true,
44
root: 'Articles',
45
totalProperty: 'Total',
46
idProperty: 'Id',
47![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy: new Ext.data.HttpProxy(
{
48
url: '/admin/getarticlesbycategory',
49![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
baseParams:
{
50
categoryId: 0
51
}
52
}),
53![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader: new Ext.data.JsonReader(
{
54
root: 'Articles',
55
id: 'Id'
56![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}, [
{
57
name: 'Id'
58![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
59
name: 'Title'
60![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
61
name: 'IsNewsPhotos'
62![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
63
name: 'PhotoUrl'
64![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
65
name: 'Content'
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
67
name: 'Summary'
68![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
69
name: 'Author'
70![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
71
name: 'Creator'
72![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
73
name: 'Template'
74![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
75
name: 'Modifier'
76![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
77
name: 'Published'
78![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
79
name: 'Deleted'
80![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
81
name: 'CreatedDatetime'
82![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
83
name: 'UpdatedDatetime'
84
}])
85
}),
86![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
87![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initComponent: function()
{
88
var grid = this;
89
var add = this.onAdd;
90
var update = this.onUpdate;
91
var del = this.onDelete;
92![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.tbar = [
{
94
text: '操作',
95![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
menu:
{
96![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [
{
97
text: '添加',
98
handler: add,
99
scope: grid
100![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
101
text: '修改',
102
handler: update,
103
scope: grid
104![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
105
text: '删除',
106
handler: del,
107
scope: grid
108
}]
109
}
110
}];
111
Cms.ArticleGrid.superclass.initComponent.call(this);
112
},
113![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onAdd: function()
{
114
var categoryId = this.category.getSelectionModel().getSelectedNode().id;
115
var grid = this;
116![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
117![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (categoryId > 0)
{
118![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
119![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var win = new Cms.ModifyArticleWindow(
{
120
categoryId: categoryId,
121![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
listeners:
{
122![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
afterSave: function(win, md, rt)
{
123![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
133
win.show();
134
}
135
},
136![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onUpdate: function()
{
137
var grid = this;
138
var article = this.getSelectionModel().getSelected().data;
139![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
140![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var win = new Cms.ModifyArticleWindow(
{
141
md: 'update',
142
article: article,
143![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
listeners:
{
144
//监听保存事件并处理
145![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
afterSave: function(win, md, rt)
{
146![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (rt)
{
147
grid.store.reload();
148
Ext.Msg.alert('', '更新成功');
149
}
150
}
151
}
152
});
153![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
154
win.show();
155
},
156![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onDelete: function()
{
157![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
158
},
159![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
loadByCategory: function(category)
{
160![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.store.baseParams =
{
161
categoryId: category
162
};
163![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.store.load(
{
164![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
params:
{
165
start: 0,
166
limit: 25
167
}
168
});
169
}
170
}
171
);
172
Ext.reg('cms.articlegrid', Cms.ArticleGrid);
执行效果:
![](https://www.cnblogs.com/images/cnblogs_com/terryliang/extjs.jpg)