CMS:文章管理之模型和Store

文章管理涉及T_Category 、T_Content 、T_Tag 和T_TagInContent 这4个表,在客户端,由于标签的两个表的显示会合并到文章内容里,因而文章管理至少需要2个模型和2个Store,一个是分类的,一个是Content的。

现在的问题是,文章管理界面左边的分类是以树形式显示的,是否需要用到一个完整的模型?完整的模型肯定是需要的,因为分类也要编辑、修改和新增。但树是否直接使用这个完整模型呢?这是要考虑的。首先,树的模型结构与完整模型肯定有区别,它会自动添加不少字段,而且id和text是必须的,这个在定义模型或Store时虽然可以改变,但不是很方便。其次,每次树节点展开,都要返回完整的模型数据,这对通讯来说有点浪费,因为这时候并不需要完整的模型数据,只有编辑节点的时候才需要。综合以上两点,笔者的观点是,还是拆分成两个模型比较合适,尽管返回完整模型有其优点,就是在编辑模型的时候,不用再去服务器取一次数据。

在编辑文章的时候,要通过Combobox选择文章分类,因而这里还需要一个模型和Store,这里要考虑的是使用下拉树选择框还是普通的下拉选择框。如果使用下拉树选择框,可以直接使用树列表的Store,使用树列表的唯一问题是在编辑文章的时候,如果当前树还没展开,会显示为空,因而在打开编辑窗口之前,一定要先展开树,处理起来有点复杂。第二种方式是下拉选择框,一次返回所有节点,或者使用类似搜索网站的查询方式显示结果。笔者比较倾向返回所有节点,在本地实现查询方式,因而,这里还需要一个模型和Store。

那么,文章是否也要拆分为2个模型和Store呢?这个主要考虑的就是通讯问题了。笔者的习惯做法是不拆,就用一个,理由嘛,习惯吧。

综合以上,需要建的模型包括Category、CategoryTree、CategoryCombo和Content这4个,Store则包括CategoriesTree、CategoriesCombo和Contents这3个。这里,少了一个分类的Store,是因为完整的分类模型只有在编辑、新增的时候用到,而这些都是单个模型实例的操作,不需要使用到Store,因而可以不定义。

目前明确后,就可以动手了。在Scripts\app\model目录下,先创建Category.js来定义完整的分类模型,代码如下:

Ext.define('SimpleCMS.model.Category',{

    extend: 'Ext.data.Model',

    fields: [

    {name: "ParentId", type: "int", defaultValue: "-1"},

        { name: "CategoryId", type:"int" },

    "Title",

        "Image",

    "Summary",

        "Content",

    {name: "Created", type: "date", dateFormat: "Y-m-dH:i:s", defaultValue: new Date() },

        { name: "SortOrder", type:"int", defaultValue: 0 }

    ],

    proxy: {

        type: "ajax",

        url: "Category/Details",

        reader: {

            type: 'json',

            root: "data",

            messageProperty: "Msg"

 

        }

    },

    idProperty: "CategoryId"

});

 

从定义代码可以看到,字段名与表格定义的字段名是一样的,这样的好处是方便。如果害怕信息泄露,可根据需要自己修改。有些字段没有定义是因为,在编辑过程中不需要显示这些字段,就省略了。代理的定义与之前的定义基本雷同,目的是保证使用统一的数据返回格式。

接着创建CategoryTree.js文件来定义分类树模型,代码如下:

Ext.define('SimpleCMS.model.CategoryTree',{

    extend: 'Ext.data.Model',

    fields: ["text",

            { name: "id", type:"int" },

            { name: "parentId", type:"int" }

    ]

});

 

代码里没定义代理,这个将由Store进行定义,因为基本操作是在Store层面。

接着是CategoryCombo.js,代码如下:

Ext.define('SimpleCMS.model.CategoryCombo',{

    extend: 'Ext.data.Model',

    fields: ["text",

            { name: "id", type:"int" },

            { name: "parentId", type:"int" },

        "listText",

        "fullpath",

        { name: "Hierarchylevel",type: "int" }

    ]

});

 

该模型实际只需要2个字段,不过为了显示上的需要,特意添加了另外几个字段。

 

接着是Content.js,代码如下:

Ext.define('SimpleCMS.model.Content',{

    extend: 'Ext.data.Model',

    fields: [

    {name: "ContentId", type: "int" },

        { name: "CategoryId", type:"int", defaultValue: 10000 },

    "Title",

        "Image",

    "Summary",

        "Content",

    {name: "Created", type: "date", dateFormat: "Y-m-dH:i:s", defaultValue: new Date() },

        { name: "Hits", type:"int" },

        { name: "SortOrder", type:"int", defaultValue: 0 },

        "Tags"

    ],

    proxy: {

        type: "ajax",

        url: "Content/Details",

        reader: {

            type: 'json',

            root: "data",

            messageProperty: "Msg"

 

        }

    },

    idProperty: "ContentId"

 

});

代码中添加了一个Tags字段,用来显示标签,该字段将以数组形式返回数据,这样,在后续的处理中会很方便。在CategoryId中,它的默认值为10000,表示文章创建时,默认的分类为“未分类”。

这样,模型就全部定义完了,现在切换到Store目录,先创建CategoriesTree.js,代码如下:

Ext.define("SimpleCMS.store.CategoriesTree",{

    extend: 'Ext.data.TreeStore',

    batchActions: false,

    remoteFilter: false,

    remoteSort: false,

    model:"SimpleCMS.model.CategoryTree",

    root: { text: "文章分类", id: -1 },

    proxy: {

        api: {

            destroy: 'Category/Delete'

        },

        type: "ajax",

        url: "/Category/List",

        reader: {

            type: 'json',

            root: "data",

            messageProperty: "Msg"

        },

        writer: {

            type: "json",

            encode: true,

            root: "data",

            allowSingle: true

        }

    }

})

 

因为分类的新增和编辑都是通过表单形式完成的,因而在配置项api中只定义了删除地址。

 

接着是CategoriesCombo.js,代码如下:

Ext.define("SimpleCMS.store.CategoriesCombo",{

    extend: 'Ext.data.Store',

    batchActions: false,

    remoteFilter: false,

    remoteSort: false,

    autoLoad: true,

    model:"SimpleCMS.model.CategoryCombo",

    proxy: {

        type: "ajax",

        url: "/Category/All",

        reader: {

            type: 'json',

            root: "data",

            messageProperty: "Msg"

        }

    }

});

 

代码中定义了配置项autoLoad为true,说明在Store实例化后会自动加载数据。

 

最后是Contents.js,代码如下:

Ext.define("SimpleCMS.store.Contents",{

    extend: 'Ext.data.Store',

    model: 'SimpleCMS.model.Content',

    batchActions: false,

    remoteFilter: true,

    remoteSort: true,

    pageSize: 50,

    proxy: {

        type: "ajax",

        url: "Content/List",

        reader: {

            type: 'json',

            root: "data",

            messageProperty: "Msg"

        }

    }

})

 

从代码可以看到,文章的Store需要支持远程排序和搜索,而且每50条记录为一页。

 

至此,文章管理的模型和Store就定义完了,下面要开始定义控制器了,这个下文再说。

posted on 2012-11-10 17:08  木鱼哥  阅读(154)  评论(0编辑  收藏  举报

导航