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所示的效果,一切正常。

CMS:文章管理之视图(2)_第1张图片

图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",

CMS:文章管理之视图(2)_第2张图片

图50 完成后的分类编辑窗口


这样,窗口底部就会向内缩进10px,按钮也就不再靠近窗口底部了,刷新一下浏览器,会看到如图51的效果。

图51 调整按钮位置后的分类编辑窗口

测试一下选择图片,在弹出的图片对话框中,选择8.png,然后单击插入按钮,会看到题图的值为“/8.PNG”,但是预览图片没效果,这是因为图片路径不对。因为现在没有前台,所以直接使用后台的路径作为图片路径就好了,在选择按钮的单击事件中,添加以下代码:

Ext.ux.Dialog.PicSelected.imagePath= "upload";

 

刷新一下浏览器,再选择图片8.PNG,会看到值已经变为“upload/8.PNG”,如图52,预览图片也显示出来了。

 CMS:文章管理之视图(2)_第3张图片

图52 调整图片路径后的预览图片显示

下面要完善父类的选择,这个下文再说。

 

你可能感兴趣的:(CMS:文章管理之视图(2))