Extjs MVC的搭建的相关话题

爱在昨天 发布于 2013/09/18 18:13
阅读 295
收藏 1

Linux基金会开源软件大学开源技术公开课即将上线,Kubernetes1.19实战讲解!>>>

    好久没写东西了! 最近研究了一下Extjs   写一下Extjs的MVC搭建吧!!!!

先介绍一下必须要的文件吧!

Extjs  必须的

model   store  這两个是数据层

View       视图层

controller  控制层

這个是app里面的代码

 

View Code
Ext.onReady(function () {
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath(""Ext.ux"",""/Scripts/ext/ext/examples/ux"");
    Ext.require([
        ""Ext.ux.data.PagingMemoryProxy"",
        ""Ext.ux.SlidingPager"",
    ]);
    Ext.application({
        name: ""AM"",//应用的名字
        appFolder: ""Scripts"",//应用的目录
        launch: function () {//当前页面加载完成执行的函数
            Ext.create("Ext.container.Viewport", {
                layout: ""auto"",
                items: {
                    xtype: ""userlist"",
                    title: ""users"",
                 }
            });
        },
        controllers: [
            ""Users""
        ]
    });
});

controller控制层

View Code
Ext.define("AM.controller.Users", {
    extend: ""Ext.app.Controller"",
    init: function () {
        this.control({
            ""userlist"": {
                edit: function (editor, e, options) {
                 
                }
            },
            ""userlist button[id=save]"": {
                click: function (o) {
                    var gird = o.ownerCt.ownerCt;
                    var st = gird.getStore();
                    st.sync();//数据与后台同步
                    var records = st.getUpdatedRecords();
                    Ext.Array.each(records, function (model) {
                        model.commit();
                    });
                }
            },
            ""userlist button[id=delet]"": {
                click: function (o) {
                    var gird = o.ownerCt.ownerCt;
                    var data = gird.getSelectionModel().getSelection();
                    if (data.length == 0) {
                        Ext.Msg.alert("系统提示", "您最少要选择一条数据!");
                    } else {
                        var st = gird.getStore();
                        var ids = [];
                        Ext.Array.each(data, function (record) {
                            ids.push(record.get(""Name""));
                        });
                        Ext.Ajax.request({
                            url: ""/Home/Index"",
                            params: { ids: ids.join(",") },
                            method: ""post"",
                            timeout: 2000,
                            success: function (response, opts) {
                                Ext.Array.each(data, function (record) {
                                    st.remove(record);
                                });
                            }
                        })

                    }
                }
                //alert(o.text);
            },
            ""userlist actioncloulmu[id=]"": {
                click: function (o, item, rowIndex, colIndex, e) {
                }
            }
        });
    },
    views: [
        ""List""
    ],
    stores: [
        ""Users""
    ],
    models: [
        "User"
    ]
});

model 和store 层

View Code
Ext.define("AM.model.User", {
    extend: ""Ext.data.Model"",
    fields: [
    { name: ""Name"", type: ""string"", sorttable: true },
    { name: ""Age"", type: ""int"", sorttable: true },
    { name: ""Email"", type: ""string"", sorttable: true },
    { name: ""Date"", type: ""string"", sorttable: true, },
    { name: ""Money"", type: ""int"", sorttable: true },
    { name: ""IsIt"", type: ""string"", sorttable: true },
    { name: ""Sex"", type: ""string"", sorttable: true },
    ]
});
View Code
Ext.define("AM.store.Users", {
    extend: ""Ext.data.Store"",
    storeId: ""s_user"",
    model:""AM.model.User"",
    proxy: {
        type: ""ajax"",
        url: ""/Home/GetUsetrList"",
        reader: {
            type: ""json"",
            root: ""Data""
        },
        writer: {
            type: ""json""
        }
    },
    //groupField:""Sex"",
    autoLoad: true
});

View  视图层

View Code
Ext.define("AM.view.List", {
    extend: ""Ext.grid.Panel"",
    title: ""MVC demo"",
    alias: ""widget.userlist"",
    frame: true,//面板渲染
    width: 1300,
    height: 500,
    columns: [//列模式
         Ext.create("Ext.grid.RowNumberer", {}),
                 // { text: ""姓名"", dataIndex: ""Name"", locked: false },
                  {
                      text: ""others"", columns: [
                          { text: ""姓名"", dataIndex: ""Name"" },
                         {
                             text: ""Email"", id: ""Email"", dataIndex: "Email",
                             field: {
                                 xtype: ""textfield"",
                                 allowBlank: false
                             }
                         }
                      ]
                  },
                 {
                     text: ""年龄"",
                     dataIndex: "Age",
                 },

                { text: ""index"", dataIndex: ""index"" },
                {
                    text: ""性别"",
                    dataIndex: ""Sex"",
                    width: 50,
                    renderer: function (value) {
                        if (value == "女") {
                            return "<font color=""blue"">" + value + "</font>";
                        } else if (value == "男") {
                            return "<font color=""red"">" + value + "</font>";
                        }
                    }
                },
                {
                    text: ""isIt"",
                    dataIndex: ""IsIt"",
                    width: 30,
                    trueText: ""是"",
                    falseText: ""否"",
                    xtype: ""booleancolumn""
                },
                {
                    text: ""畜生日期"",

                    xtype: ""datecolumn"",
                    width: 150,
                    format: ""Y年m月d日"",
                    renderer: renderOnLastUpdateDate,
                    dataIndex: ""Date""
                },
                {
                    text: ""Money"",
                    dataIndex: ""Money"",
                    xtype: ""numbercolumn"",
                    width: 150,
                    format: ""0.000""
                },
                {
                    text: ""描述"",
                    xtype: ""templatecolumn"",
                    tpl: ""用户的姓名是{Name},年龄{Age}"",
                    width: 200
                },
                {
                    text: ""操作"",

                    xtype: ""actioncolumn"",
                    id: """",
                    icon: ""Scripts/Imgs/table_48.png"",
                    width: 50,
                    handler: function (grid, row, col) {
                        alert(row + col);
                    }
                }
    ],
    tbar: [
                { xtype: ""button"", text: ""新增"", icon: ""Scripts/Imgs/add_user.ico"" },
                { xtype: ""button"", id: ""delet"", text: ""删除"", icon: ""Scripts/Imgs/remove_user.ico"" },
                { xtype: ""button"", text: ""修改"", icon: ""Scripts/Imgs/edit_user.ico"" },
                { xtype: ""button"", text: ""查看"", icon: ""Scripts/Imgs/search.ico"" },
                { xtype: ""button"", text: ""撤销"", id: ""ion"" },
                { xtype: ""button"", text: ""保存"", id: ""save"" }

    ],
    dockedItems: [{
        xtype: ""pagingtoolbar"",
        store: "Users",
        dock: ""bottom"",
        displayInfo: true,
        plugins: Ext.create(""Ext.ux.SlidingPager"", {})
    }],
    //plugins: [
    //    Ext.create("Ext.grid.plugin.CellEditing", {
    //        clicksToEdit: 2
    //    })
    //    //Ext.create("Ext.grid.plugin.RowEditing", {
    //    //    clicksToEdit:1
    //    //})
    //],
    viewConfig: {
        plugins: [
            Ext.create("Ext.grid.plugin.DragDrop", {
                ddGroup: ""ddTree"",//拖放组的名称
                dragGroup: ""userlist"",//拖拽组名称
                dropGroup: ""userlist"",//释放组名称
                enableDrag: true,//是否启用
                enableDrop: true
            })],
        listeners: {
            drop: function (node, data, dropRec, dropPosition) {
                var st = this.getStore();
                for (var i = 0; i < st.length; i++) {
                    st.getAt(i).set(""index"", i + 1);
                }
            }
        }
    },
    //selType: ""checkboxmodel"",//设定选择模式
    //multiSelect: true,//运行多选
    selType: ""rowmodel"",//行选择模式
    //selType: ""cellmodel"",
    multiSelect: true,//
    enableKeyNav: true,//运行键盘
    store: "Users",
    initComponent: function () {
        this.callParent(arguments);
    }
});
function renderOnLastUpdateDate(value, p, record) {

    var jsondate = record.data.Date;

    return eval("new " + jsondate.substr(1, jsondate.length - 2)).toLocaleDateString();
}

其实Extjs的 MVC真的很不错!!!

http://girl.hebnews.cn/201202/05/content_5575.html 
http://jgxy.ahsztc.edu.cn/sjo/0908990.asp
http://www.tnrsld.gov.cn/cy/news/index.asp 
http://www.tnrsld.gov.cn/cy/news/bjl.asp 
http://www.tnrsld.gov.cn/cy/news/hgzq.asp 

加载中
返回顶部
顶部