当前位置:编程学习 > 网站相关 >>

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();

},

 

好了,现在刷新一下浏览器,然后单击添加类别按钮,


 

现在,要做的就是为窗口添加表单了,根据表格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: {

  &n

补充:Web开发 , 其他 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,