EXTJS4.x之实战项目（9）SectionContentGridPanel栏目内容管理页的实现

最新推荐文章于 2018-11-06 19:40:42 发布

包包_安安

最新推荐文章于 2018-11-06 19:40:42 发布

阅读量2k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/yunji3344/article/details/9294369

版权

extjs 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

上面的文章管理，媒体管理和栏目管理都差不多，实现之后效果如下图

由于栏目内容管理与其他的不同所以我们这里来详细实现一下。

1）为SectionContentGridPanel添加一下控件toolbar，combobox，button和textfield。属性如下图效果

2）为combobox配置数据源

由于combobox的数据源是栏目列表故我们可以直接使用之前制作好的SectionStore。

将combobox的store设置为SectionStore，displayField设置为sectionName。保存运行效果如下图

3）制作SectionContentGridPanelController

1.添加一个SectionContentGridPanelController

2.添加SectionContentGridPanel到views中

3.添加以下函数init,add,del,search,detail,sectionChancle。除了init函数其他都有一个sender的参数。如下图

4）编写init函数，内容如下

this.control(
{
    'SectionContentGridPanelController > toolbar > button[text=添加]': 
    {
        click: this.add
    },
    'SectionContentGridPanelController > toolbar > button[text=删除]': 
    {
        click: this.del
    },
    'SectionContentGridPanelController > toolbar > button[text=查看]': 
    {
        click: this.detail
    },
    'SectionContentGridPanelController > toolbar > button[text=查询]': 
    {
        click: this.search
    },
    'SectionContentGridPanelController > toolbar > combobox': 
    {
        select: this.sectionChancle
    }
}
);

5）制作SectionContentStore。结构和属性如下图：

与之配套的SectionContent如下

6）配置SectionContentGridPanel，如下图

配置的方法和原理之前已经讲过，这里不在重复。

7）编写sectionChancle，把sectionChancle改名为sectionSelect并添加一个叫records的参数，对应的在init函数也改下。

sectionSelect内容如下：

var grid = sender.ownerCt.ownerCt;
proxy = grid.store.getProxy();
proxy.extraParams = {sectionId:records[0].get('id')};
grid.store.reload();

代码的作用是获取选择的栏目的栏目id，然后提交后台重新加载数据。到现在我们仍然看不到任何数据，因为我们还没添加内容。

8）实现添加内容到指定栏目中。我们要实现的效果是当选择了一个栏目之后点击添加，弹出一个窗口让操作者添加内容。

1.制作内容添加窗口ContentWindow，如下图：

2.为ContentWindow的combobox编写一个ContentTypeStore数据源。

Ext.define('MyApp.store.ContentTypeStore', {
    extend: 'Ext.data.Store',

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'ContentTypeStore',
            data: [
                {
                    text: '活动资源',
                    value: 1
                },
                {
                    text: '媒体资源',
                    value: 2
                },
                {
                    text: '文章资源',
                    value: 3
                }
            ],
            fields: [
                {
                    name: 'text'
                },
                {
                    name: 'value'
                }
            ]
        }, cfg)]);
    }
});

这里只粘贴生成的代码，需要读者根据代码去设置属性。将ContentWindow的combobox的store设置为ContentTypeStore

3.为ContentWindow做一个控制器ContentWindowController，做如下图代码的配置

Ext.define('MyApp.controller.ContentWindowController', {
    extend: 'Ext.app.Controller',

    views: [
        'ContentWindow'
    ],

    init: function() {
        this.control(
        {
            'ContentWindow > button[text=确定]': 
            {
                click: this.commit
            },
            'ContentWindow > gridpanel > toolbar > button[text=查询]': 
            {
                click: this.search
            },
            'ContentWindow > gridpanel > toolbar > combobox': 
            {
                select: this.onSelect
            }
        }
        );
    },

    onSelect: function(sender, records) {
        var grid = sender.ownerCt.ownerCt;
        var win = grid.ownerCt;
        proxy = grid.store.getProxy();
        win.contentType = records[0].get('value');
        proxy.extraParams = {contentType:win.contentType};
        grid.store.reload();
    },

    search: function(sender) {
        var grid = sender.ownerCt.ownerCt;
        var win = grid.ownerCt;
        proxy = grid.store.getProxy();
        kw = sender.ownerCt.child("textfield[fieldLabel=名称:]");
        proxy.extraParams = {
            keyWord:kw.value,
            contentType:win.contentType
        };
        grid.store.reload();
    },

    commit: function(sender) {
        var win = sender.ownerCt;
        var grid = win.child('gridpanel');
        var selRecords = grid.getSelectionModel().getSelection();
        var len = selRecords.length;
        var ids = "";
        if (len == 0) {
            Ext.MessageBox.alert("提示消息", "您未选中行!");
            return false;
        }
        var contentIds = "";
        var contentTypes = "";
        for (var i = 0; i < len; i++) {
            if (i == len - 1) 
            { 
                contentIds += selRecords[i].get("id"); 
                contentTypes += win.contentType;
            }
            else {
                contentIds += selRecords[i].get("id") + ",";
                contentTypes += win.contentType + ",";
            }
        }

        Ext.Ajax.request( {  
            url : '../section/addContents',  
            method : 'GET',  
            params : {  
                sectionId : win.sectionId,  
                contentTypes : contentTypes,
                contentIds : contentIds,
            },  
            success : function(response, options) {  
                win.reload();
                win.close();  
            },  
            failure : function() {  
                Ext.MessageBox.alert("提示消息", "连接失败!");
            }  
        });  
    }

});

步骤比较多不一一详细说了，看着代码来操作应该问题不大。当选择combobx的时候根据所选择的contentType来加载指定类型的资源。当点击查询的时候获取数据接口中增加一个koyWord的参数。点击确定的时候先检查有没选取数据，如果有则组织参数传给后端。

4.编写SectionContentGridPanelController的add函数，代码如下

combobox = sender.ownerCt.child('combobox');

if(!combobox.value){
    Ext.Msg.alert('提示', '还没选择栏目!');
    return;
}
var win = Ext.create('MyApp.view.ContentWindow', {
    buttonAlign: 'center',
    title:'添加内容到 <'+combobox.getDisplayValue()+'>栏目中'
});

win.show();
win.sectionId = combobox.value;

grid = win.child('gridpanel');
//清空参数
grid.store.proxy.extraParams={};
grid.store.reload();
win.reload=function(){
    sender.ownerCt.ownerCt.store.reload();
};

5.添加ContentStore，生成代码如下

Ext.define('MyApp.store.ContentStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.SectionContent'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'ContentStore',
            model: 'MyApp.model.SectionContent',
            proxy: {
                type: 'ajax',
                url: '../section/contentListAll',
                reader: {
                    type: 'json',
                    root: 'results',
                    totalProperty: 'totalCount'
                }
            }
        }, cfg)]);
    }
});

6.将ContentWindow中的gridpanel的store设置为ContentStore。其他的配置这里不详细说了，后效果如下图所示：

8）实现删除功能编写del函数，输入以下内容

var grid = sender.ownerCt.ownerCt;
var selRecords = grid.getSelectionModel().getSelection();
var len = selRecords.length;
var ids = "";
if (len == 0) {
    Ext.MessageBox.alert("提示消息", "您未选中行!");
    return false;
}
Ext.Msg.confirm("提示", "确定要删除吗?", function (btn) 
{
    if (btn == "yes") {
        selRecords = grid.getSelectionModel().getSelection();
        len = selRecords.length;
        if(len == 0){
            return;
        }
        for (var i = 0; i < len; i++) {
            if (i == len - 1) 
            { 
                ids += selRecords[i].get("id"); 
            }
            else {
                ids += selRecords[i].get("id") + ",";
            }
        }
        Ext.Ajax.request(
        {
            url: "../section/deleteContent",
            waitMsg: '正在提交数据',
            waitTitle: '提示',
            params: {
                "ids": ids
            },
            success: function (reponse, option) {
                grid.getStore().reload();
                Ext.MessageBox.alert("提示消息", "删除成功！");
            },
            failure: function () {
                Ext.MessageBox.alert("提示消息", "删除失败！");
            }
        }
        );
    }
});

9）.实现查看详细

1.添加一个窗口，SectionContentWindow生成代码如下

Ext.define('MyApp.view.SectionContentWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.SectionContentWindow',

    height: 600,
    width: 600,
    title: '栏目内容管理',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    height: 550,
                    bodyPadding: 10,
                    title: '',
                    items: [
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'id',
                            readOnly: true,
                            fieldLabel: 'id'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'name',
                            fieldLabel: 'name'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'type',
                            readOnly: true,
                            fieldLabel: 'type'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'sectionId',
                            readOnly: true,
                            fieldLabel: 'sectionId'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'createTime',
                            readOnly: true,
                            fieldLabel: 'createTime'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'sortNo',
                            fieldLabel: 'sortNo'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'topFlag',
                            fieldLabel: 'topFlag'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'contentId',
                            readOnly: true,
                            fieldLabel: 'contentId'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            name: 'logo',
                            fieldLabel: 'logo'
                        },
                        {
                            xtype: 'textareafield',
                            anchor: '100%',
                            name: 'description',
                            fieldLabel: 'description'
                        },
                        {
                            xtype: 'textareafield',
                            anchor: '100%',
                            name: 'data',
                            fieldLabel: 'data'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

根据代码自行设置窗口

2.编写detail函数，代码如下

var grid = sender.ownerCt.ownerCt;
var selRecords = grid.getSelectionModel().getSelection();
var len = selRecords.length;
var ids = "";
if (len == 0) {
    Ext.MessageBox.alert("提示消息", "您未选中行!");
    return false;
}
if (len > 1) {
    Ext.MessageBox.alert("提示消息", "一次只能查看一行!");
    return false;
}

var from;
var win;
function submit() {
    if (!from.getForm().isValid()) return;
    from.getForm().submit({
        waitMsg: '正在提交数据',
        waitTitle: '提示',
        url: '../section/updateContent',
        method: 'POST',
        success: function(form, action) {
            Ext.Msg.alert('提示', '保存成功');
            sender.ownerCt.ownerCt.store.reload();
            win.close();
        },
        failure: function(form, action) {
            Ext.Msg.alert('提示', '接口异常');
        }
    });
}

win = Ext.create('MyApp.view.SectionContentWindow', {
    buttons: [
    { text: '保存', handler: submit },
    ],
    buttonAlign: 'center'
});

win.show();
from = win.items.get(0);
data = selRecords[0];
from.getForm().findField("id").setValue(data.get("id"));  
from.getForm().findField("name").setValue(data.get("name"));  
from.getForm().findField("type").setValue(data.get("type"));  
from.getForm().findField("sectionId").setValue(data.get("sectionId"));  
from.getForm().findField("createTime").setValue(data.get("createTime"));  
from.getForm().findField("data").setValue(data.get("data"));  
from.getForm().findField("sortNo").setValue(data.get("sortNo"));  
from.getForm().findField("topFlag").setValue(data.get("topFlag"));  
from.getForm().findField("description").setValue(data.get("description"));
from.getForm().findField("contentId").setValue(data.get("contentId"));
from.getForm().findField("logo").setValue(data.get("logo"));

10）实现查询功能，编写search函数

var grid = sender.ownerCt.ownerCt;
proxy = grid.store.getProxy();
kw = sender.ownerCt.child("textfield[fieldLabel=名称:]");
proxy.extraParams = {
    keyWord:kw.value,
    sectionId:sender.ownerCt.child("combobox").value
};
grid.store.reload();

至此所有功能做完，细节就留给读者自己调整了，下面是最终的效果