CMS：文章管理之视图（2）
上一篇已经完成了分类树的显示，现在开始逐步完成分类的添加、删除和编辑操作。
首先要做的是在树面板上添加一个工具栏，放置添加、删除和编辑按钮。切换到文章管理视图的脚本文件view.js，在树的定义内，添加以下代码添加工具栏和按钮：
tbar: [
{ iconCls: "folder-add", scope:me, tooltip: '增加文章类别',id:"CategoryButtonAdd"},
{ iconCls: "folder-edit", scope:me, tooltip: '编辑文章类别',id:"CategoryButtonEdit",disabled:true},
{ iconCls: "folder-delete",scope: me, tooltip: '删除文章类别',id:"CategoryButtonDelete",disabled:true},
{ iconCls: "refresh", scope: me,qtip: '刷新',id:"CategoryButtonRefresh" }
]
以上代码基本是复制来复制去的了，没什么特别。样式里还没定义编辑按钮的样式，在app.css里加上就行了。
现在切换到文章管理控制器的脚本Content.js，通过它们的id，添加4个按钮的引用，代码如下：
{ ref:"CategoryAdd", selector: "#CategoryButtonAdd" },
{ ref:"CategoryEdit", selector: "#CategoryButtonEdit" },
{ ref:"CategoryDelete", selector: "#CategoryButtonDelete" },
{ ref: "CategoryRefresh", selector:"#CategoryButtonRefresh" }
然后和用户管理控制器一样，为4个按钮绑定单击事件，代码如下：
me.getCategoryAdd().on("click",me.onCategoryAdd, me);
me.getCategoryEdit().on("click",me.onCategoryEdit, me);
me.getCategoryDelete().on("click",me.onCategoryDelete, me);
me.getCategoryRefresh().on("click",me.onCategoryRefresh, me);
现在，先完成比较简单的刷新操作，因为要找到文章管理的视图，因而修改一下使用widget方法创建视图时的代码，让它保存到控制器的属性中，修改代码如下：
me.view= Ext.widget("contentview");
panel.add(me.view);
这样修改后，就不需要通过引用去找视图了。现在就可轻松完成树的刷新操作了，代码如下：
onCategoryRefresh:function () {
this.view.tree.store.load();
},
添加操作将通过一个带表单的弹出窗口实现，现在来创建这个窗口。在Scripts\app\view\Content目录下创建一个名称为CategoryEdit.js的脚本文件。因为是弹出窗口，因而需要从窗口继承，代码如下：
Ext.define("SimpleCMS.view.Content.CategoryEdit",{
extend: "Ext.window.Window",
hideMode: 'offsets',
closeAction: 'hide',
closable: true,
resizable: true,
layout: "fit",
title: '文章分类',
width: 800,
height: 600,
modal: true,
singleton: true,
initComponent: function () {
var me = this;
me.callParent(arguments);
}
})
代码表明窗口可以关闭，可以调整大小，布局将采用FitLayout，默认宽度为800，高度为600，窗口为模态窗口。配置项closeAction表明窗口关闭后，只是隐藏起来，并不是销毁，而且隐藏方式是通过偏移方式隐藏。
特别要注意，在这里把窗口设置成了单例模式（配置项singleton为true），目的是为了避免在控制器中先判断窗口是否已经创建，如果还没有，还要重新调用create方法创建一次。
如果想看一下效果，可切换到文章管理控制器，在视图内添加“Content.CategoryEdit”引用该视图。然后在onCategoryAdd方法内添加以下代码：
onCategoryAdd:function () {
var me = this
win =SimpleCMS.view.Content.CategoryEdit;
win.show();
},
好了，现在刷新一下浏览器，然后单击添加类别按钮，将看到如图49所示的效果，一切正常。
图50 分类编辑窗口
现在，要做的就是为窗口添加表单了，根据表格T_Category，需要编辑的字段包括父类、标题、题图、分类说明和排序序数。标题将采用Textfield进行输入，题图则要通过显示一个弹出窗口，从图片管理这个扩展中选择后插入，排序序数则可选择使用Number字段输入，分类说明则用Textarea字段，父类不用说是采用Combobox。
因为要用到一个图片插入对话框，因而先来完成这个，这个不难，在Scripts/Extjs/ux目录下先创建一个Dialog的目录，该目录的作用是用来放置一些对话框扩展。然后在该目录下创建一个PicSelected.js的文件，然后可以复制一下分类编辑窗口的代码过去，修改一下类名和配置项就可以了，代码如下：
Ext.define("Ext.ux.Dialog.PicSelected",{
extend: "Ext.window.Window",
requires: ["Ext.ux.PicManager"],
singleton: true,
hideMode: 'offsets',
closeAction: 'hide',
closable: true,
layout: "fit",
imagePath: "",
resizable: true,
title: '插入图片',
width: 1000,
height: 600,
modal: true,
initComponent: function () {
var me = this;
me.callParent(arguments);
}
})
熟记类名规则对怎么定义类名就没什么难度。在这里添加了一个requires的配置项，表明该对话框要用到扩展PicManager。因为后台的图片访问路径和前台的访问路径可能有差，因而这里特意添加了一个imagePath属性，用来在插入时更改路径。其它的配置项与分类编辑窗口基本无差。
对话框的主要作用就是显示PicManager让用户选择图片，然后单击插入按钮插入图片路径，功能比较简单，因而在initComponent的代码比较简单，具体代码如下：
me.picmanager= Ext.create("Ext.ux.PicManager", { title: "" });
me.items= [me.picmanager];
me.dockedItems= [{
xtype: 'toolbar', dock: 'bottom', ui:'footer', layout: { pack: "center" },
items: [
{ text: "插入", width: 80, handler:me.onInsert, scope: me }
]
}];
现在，要完成插入操作。要插入图片，首先要从PicManager中获取到选择的图片，这个不难。然后，要获取插入图片的控件，这个就需要在显示对话框的时候指定了，可通过一个名为ed的属性来实现。思路明确后，就可编写代码了，具体代码如下：
onInsert:function () {
var me = this, rs = me.picmanager.dataview.getSelectionModel().getSelection();
if (rs.length > 0) {
if (me.ed.isFormField) {
me.ed.setValue(Ext.String.format("{0}{1}{2}",me.imagePath, rs[0].data.path, rs[0].data.filename));
} else {
}
}
me.close();
}
代码先从扩展中获取数据视图的选中的记录，如果有存在选择记录，则判断ed指向的控件是否一个表单字段，如果是，就可以用setValue方法设置它的值了。通过Ext中字符串的format方法可以将访问路径、图片路径和文件名组合成字符串返回给控件。
现在返回分类编辑窗口，完成表单，先写好表单的定义，如果已经做过项目，有写好的表单，复制粘贴就行了，代码如下：
me.form= Ext.create(Ext.form.Panel, {
border: false, bodyPadding: 5,
bodyStyle: "background:#DFE9F6",
trackResetOnLoad: true,
fieldDefaults: {
labelWidth: 80, labelSeparator: "：", anchor: "0"
},
});
表单的显示方式完全是个人喜欢，根据自己熟悉和喜好进行定义就好了。这里把表单的表框去了，然后将放置子组件部分向内压缩了5px，以避免文字和窗口的内边框贴在一起。背景颜色如果不设置就是白色的底色，笔者一向不太喜欢这样白色的背景。尤其要注意trackResetOnLoad这个配置项，如果为true，当为表单设置了初始数据后，重置操作后会恢复到初始数据，而不是完全空白的状态。配置项fieldDefaults就是默认的字段定义了，适用于所有字段。
接着就是在表单items配置项里添加字段了，首先是一个隐藏字段，用来记录编辑时的记录的id，代码如下：
{xtype:"hidden",name:"CategoryId"},
接着是标题，代码如下：
{ xtype: "textfield", fieldLabel: "标题", name: "Title",allowBlank: false},
题图复杂点，需要用一个字段容器来放置一个文本字段和选择按钮，代码如下：
{
xtype: "fieldcontainer", layout:"hbox", fieldLabel: "题图", defaults: { hideLabel: true },
items: [
{ xtype: 'textfield', flex: 1, name:"Image" },
{ xtype: "button", width:80, text: "选择",
handler: function () {
var img = this.up("form").getForm().findField("Image");
Ext.ux.Dialog.PicSelected.ed = img;
Ext.ux.Dialog.PicSelected.show();
}
}
]
}
从代码可以看到单击选择按钮后，会先从表单中找到Image字段，然后把图片选择对话框的ed属性指向该组件，再显示图片选择对话框就可以了。
因为这里要用到图片选择对话框，因而需要在窗口定义中加入requires配置项来引用该对话框。
如果想预览题图，可以加入一个Image组件，代码如下：
{
xtype: 'fieldset', title: "题图预览", height: 150, items: [
{ xtype: "image", id:" CategoryPreviewImage" }
]
}
这还要修改一下Image字段，监听它的chage事件，当字段改变时，改变图片的src，代码如下：
{xtype: 'textfield', flex: 1, name: "Image",
listeners: {
scope: me,
change: function (filed, newValue,oldValue) {
Ext.getCmp("CategoryPreviewImage").setSrc(newValue);
}
}
},
接着是父类选择，代码如下：
{
xtype: "combobox", fieldLabel:"父类", name:"ParentId", allowBlank: false,
editable: true, shadow: false, mode:'local', triggerAction: 'all', store: "categoriesCombo",
rootVisible: true, displayField:"text", valueField: "id", flex: 1,
listConfig: {
displayField: "listText"
}
},
这里要特别说明一下，笔者自己都忘记了。因为分类编辑窗口是单例模式的，会直接创建实例，而且是先于控制器创建，因而这里的Combobox要用到CategoriesCombo，必须在requires添加引用，而且要将CategoriesCombo也设置为单例模式，且添加配置项storeId，为它定义一个标识，再在Combobox里引用。在文章管理控制器里，还要把配置项stores中对该Store的引用删除。
在Combobox中，列表中的数据不是非要使用displayField设置的字段来显示的，可通过listConfig配置项，重新设置显示字段。在这里，设置了显示字段为listText，笔者这样做的目的是为了使列表显示得像一颗树。
余下是排序序数和分类说明，这个不难，代码如下：
{
xtype: 'numberfield', fieldLabel: "排序序数", name: "SortOrder",allowBlank: false
},
{
xtype:'textareafield',fieldLabel: "说明",name:"Content",labelAlign:"top",height:250
}
接着在表单底部放置保存和重置两个按钮，代码如下：
dockedItems:[{
xtype: 'toolbar', dock: 'bottom', ui:'footer', layout: { pack: "center" },
items: [
{text: "保存", width:80, disabled: true, formBind: true, handler: me.onSave, scope: me },
{text: "重置", width:80, handler: me.onReset, scope: me }
]
}]
保存按钮默认状态禁用的，设置了formBind为true，也就是说只有所有字段输入符合要求的时候才可以开启保存按钮，这样比较方便。
现在把表单放到窗口的items里，代码如下：
me.items = [me.form];
现在可以测试一下窗口了，刷新一下浏览器，然后单击添加分类按钮，可看到如图50的效果。底部按钮太靠近窗口底部了，需要调整一下，这个可通过设置窗口bodyPadding来实现，在单例模式的配置项下添加以下代码：
bodyPadding:"00 10 0",
图50 完成后的分类编辑窗口
这样，窗口底部就会向内缩进10px，按钮也就不再靠近窗口底部了，刷新一下浏览器，会看到如图51的效果。
图51 调整按钮位置后的分类编辑窗口
测试一下选择图片，在弹出的图片对话框中，选择8.png，然后单击插入按钮，会看到题图的值为“/8.PNG”，但是预览图片没效果，这是因为图片路径不对。因为现在没有前台，所以直接使用后台的路径作为图片路径就好了，在选择按钮的单击事件中，添加以下代码：
Ext.ux.Dialog.PicSelected.imagePath= "upload";
刷新一下浏览器，再选择图片8.PNG，会看到值已经变为“upload/8.PNG”，如图52，预览图片也显示出来了。
图52 调整图片路径后的预览图片显示
下面要完善父类的选择，这个下文再说。
