`
wwww2
  • 浏览: 13436 次
最近访客 更多访客>>
it_test
社区版块
存档分类
最新评论

EXTJS 添加修改提交不同store的grid功能 ，以及发布操作

extcsshtmljsonjavascript 
阅读更多
blackType.html
<html>
<head>
    <title></title>
<script type="text/javascript" src="../../ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all-slate.css" />
    <script type="text/javascript" src="blackTypeNew.js"></script>
</head>
<body width="100%" height="100%">
<div id="grid" width="100%" height="100%">
</div>
</body>
</html>

blackType.js
Ext.define('MyApp.view.ui.MyViewport', {
    extend: 'Ext.container.Viewport',
    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;
      
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    width: 81,
                    height:333,
                    layout: {
                        type: 'anchor'
                    },
                    region: 'west',
                    items: [
                        {
                            xtype: 'button',
                            height: 60,
                            margin: '',
                            width: 81,
                            handler:showContactForm,
                            text: '添加'
                        },
                        {
                            xtype: 'button',
                            id:'willlook',
                            height: 60,
                            width: 81,
                            text: '预审',
                            handler:function() {
          Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con1"));
          Ext. get( 'con4').puff();
                                Ext. get( 'con1').fadeIn();
                        }
                      },
                        {
                            xtype: 'button',
                            height: 60,
                            width: 81,
                            text: '审核',
                            handler:function() {
          Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con2"));
          Ext. get( 'con1').puff();
                                Ext. get( 'con2').fadeIn();
                        }
                        },
                        {
                            xtype: 'button',
                            height: 60,
                            width: 81,
                            text: '表1',
                            handler:function() {
          Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con4"));
          Ext. get( 'con2').puff();
                                Ext. get( 'con4').fadeIn();
                        }
                        },
                        {
                            xtype: 'button',
                            height: 60,
                            width: 81,
                            text: '表2',
                            handler:function() {
          Ext.getCmp("viewCon").layout.setActiveItem(Ext.getCmp("con3"));
          Ext. get( 'con2').puff();
                                Ext. get( 'con3').fadeIn();
                        }
                        }
                    ]
                },
                {
                xtype: 'container',
                  id:'viewCon',
                    height:333,
                    layout: {
                        type: 'card'
                    },
                    activeItem: 0,
                    region: 'center',
                    items: [
                        {
                       
                    xtype: 'container',
                    id:'con1',
                    height:333,
                    layout: {
                        type: 'column'
                    },
                    region: 'center',
                    items: [
                        {
                            xtype: 'toolbar',
                            width: 1359,
                            items: [
                                {
                                    xtype: 'button',
                                    text: '批量提交',
                                    handler:function(){
                                                var record = Ext.getCmp('gridpanel1').getSelectionModel().getSelection();
                                                if(record.length == 0){
                            Ext.MessageBox.show({
                            title:"提示",
                            msg:"请先选择您要操作的行!"
                        })
                        return;
                    }else{
                                            var ids = "";
                                            var tds = "";
                                            var mds = "";
                            for(var i = 0; i < record.length; i++){
                            ids += record[i].get("imsi");
                            tds += record[i].get("telNumber");
                            mds += record[i].get("mobtype");
                            }
                           
                            store2.insert(0,{
                            telNumber: tds,
                            imsi:ids,
                            mobtype:mds
                            });
                                  store.remove(record)
                                 
                                   // var a = new Ext.Element("gridpanel1");
                        Ext.MessageBox.show({
                            title:"提示",
                            msg:'已提交到审核',
                           // animEl : a
                        })
       
                      }
                                                 }
                                }
                            ]
                        },
                        {
                            xtype: 'gridpanel',
                            id:'gridpanel1',
                            height: 733,
                            width: 1359,
                            plugins: [cellEditing],
                            store: Ext.data.StoreManager.lookup('simpsonsStore'),
                            title: '',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'telNumber',
                                    editor: {
                allowBlank: false
            },
                                    width:400,
                                    text: '手机号'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'imsi',
                                    editor: {
                allowBlank: false
            },
                                    width:400,
                                    text: 'IMSI'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'mobtype',
                                    editor:
                 new Ext.form.field.ComboBox({
                typeAhead: true,
                triggerAction: 'all',
                selectOnTab: true,
                store: [
                    ['QQ','QQ'],
                    ['新浪微博','新浪微博'],
                    ['UC浏览器','UC浏览器'],
                ],
                lazyRender: true,
                listClass: 'x-combo-list-small'
            }),
          
                                    width:400,
                                    text: '移动网络类型'
                                }
                            ],
                            viewConfig: {
                           
                            },
                            selModel: Ext.create('Ext.selection.CheckboxModel', {
                           
                            })
                           
                        },
                        {
                            xtype: 'pagingtoolbar',
                            id:'panbar',
                            store: Ext.data.StoreManager.lookup('simpsonsStore'),
                            width: 1359,
                            pressed:true,
                            beforePageText:'当前是第',
                            enableToggle: true,
            afterPageText:'页,共{0}页',
                            firstText:'首页',
                            prevText:'上一页',
                            nextText:'下一页',
                            lastText:'尾页',
                            refreshText:'刷新',
                            pageSize: 25,
          displayInfo: true,
          displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
          emptyMsg: '没有数据',
          toggleHandler: function(btn, pressed) {
                }
                        }
                    ]
                },{
                //审核
                    xtype: 'container',
                    id:'con2',
                    height:333,
                    layout: {
                        type: 'column'
                    },
                    region: 'center',
                    items: [
                        {
                            xtype: 'toolbar',
                            width: 1359,
                            items: [
                                {
                                    xtype: 'button',
                                    text: '批量提交',
                                    handler:function(){
                                                var record = Ext.getCmp('gridpanel2').getSelectionModel().getSelection();
                                                if(record.length == 0){
                            Ext.MessageBox.show({
                            title:"提示",
                            msg:"请先选择您要操作的行!"
                        })
                        return;
                    }else{
                                            var ids = "";
                                            var tds = "";
                                            var mds = "";
                            for(var i = 0; i < record.length; i++){
                            ids += record[i].get("imsi");
                            tds += record[i].get("telNumber");
                            mds += record[i].get("mobtype");
                            }
                           
                            store4.insert(0,{
                            telNumber: tds,
                            imsi:ids,
                            mobtype:mds
                            });
                                  store2.remove(record)

                        Ext.MessageBox.show({
                            title:"提示",
                            msg:'已提交表1'
                        })
                      }
                                                 }
                                }
                            ]
                        },
                        {
                            xtype: 'gridpanel',
                            id:'gridpanel2',
                            height: 733,
                            width: 1359,
                            store: Ext.data.StoreManager.lookup('simpsonsStore2'),
                            title: '',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'telNumber',
                                    width:400,
                                    text: '手机号'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'imsi',
                                    width:400,
                                    text: 'IMSI'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'mobtype',
                                    width:400,
                                    text: '移动网络类型'
                                }
                            ],
                            viewConfig: {

                            },
                            selModel: Ext.create('Ext.selection.CheckboxModel', {
                            })
                        },
                        {
                            xtype: 'pagingtoolbar',
                            store: Ext.data.StoreManager.lookup('simpsonsStore2'),
                            width: 1359,
                            beforePageText:'当前是第',
            afterPageText:'页,共{0}页',
            firstText:'首页',
            prevText:'上一页',
            nextText:'下一页',
            lastText:'尾页',
            refreshText:'刷新',
                            pageSize: 25,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: '没有数据'
                        }
                    ]
                },{
                //表2
                    xtype: 'container',
                    id:'con3',
                    height:333,
                    layout: {
                        type: 'column'
                    },
                    region: 'center',
                    items: [
                        {
                            xtype: 'toolbar',
                            width: 1359,
                            items: [
                                {
                                    xtype: 'button',
                                    text: '解封',
                                    handler:function(){
                                                var record = Ext.getCmp('gridpanel3').getSelectionModel().getSelection();
                                                if(record.length == 0){
                            Ext.MessageBox.show({
                            title:"提示",
                            msg:"请先选择您要操作的行!"
                        })
                        return;
                    }else{
                                            var ids = "";
                                            var tds = "";
                                            var mds = "";
                            for(var i = 0; i < record.length; i++){
                            ids += record[i].get("imsi");
                            tds += record[i].get("telNumber");
                            mds += record[i].get("mobtype");
                            }
                           
                            store.insert(0,{
                            telNumber: tds,
                            imsi:ids,
                            mobtype:mds
                            });
                                  store3.remove(record)

                        Ext.MessageBox.show({
                            title:"提示",
                            msg:'已解除到预审'
                        })
                      }
                                                 }
                                }
                            ]
                        },
                        {
                            xtype: 'gridpanel',
                            id:'gridpanel3',
                            height: 733,
                            width: 1359,
                            store: Ext.data.StoreManager.lookup('simpsonsStore3'),
                            title: '',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'telNumber',
                                    width:400,
                                    text: '手机号'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'imsi',
                                    width:400,
                                    text: 'IMSI'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'mobtype',
                                    width:400,
                                    text: '移动网络类型'
                                }
                            ],
                            viewConfig: {

                            },
                            selModel: Ext.create('Ext.selection.CheckboxModel', {
                            })
                        },
                        {
                            xtype: 'pagingtoolbar',
                            store: Ext.data.StoreManager.lookup('simpsonsStore3'),
                            width: 1359,
                            beforePageText:'当前是第',
            afterPageText:'页,共{0}页',
            firstText:'首页',
            prevText:'上一页',
            nextText:'下一页',
            lastText:'尾页',
            refreshText:'刷新',
                            pageSize: 25,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: '没有数据'
                        }
                    ]
                },
                {
                //表1
                    xtype: 'container',
                    id:'con4',
                    height:333,
                    layout: {
                        type: 'column'
                    },
                    region: 'center',
                    items: [
                        {
                            xtype: 'toolbar',
                            width: 1359,
                            items: [
                                {
                                    xtype: 'button',
                                    text: '批量提交',
                                    handler:function(){
                                                var record = Ext.getCmp('gridpanel4').getSelectionModel().getSelection();
                                                if(record.length == 0){
                            Ext.MessageBox.show({
                            title:"提示",
                            msg:"请先选择您要操作的行!"
                        })
                        return;
                    }else{
                                            var ids = "";
                                            var tds = "";
                                            var mds = "";
                            for(var i = 0; i < record.length; i++){
                            ids += record[i].get("imsi");
                            tds += record[i].get("telNumber");
                            mds += record[i].get("mobtype");
                            }
                           
                            store3.insert(0,{
                            telNumber: tds,
                            imsi:ids,
                            mobtype:mds
                            });
                                  store4.remove(record)

                        Ext.MessageBox.show({
                            title:"提示",
                            msg:'已提交到表2'
                        })
                      }
                                                 }
                                }
                            ]
                        },
                        {
                            xtype: 'gridpanel',
                            id:'gridpanel4',
                            height: 733,
                            width: 1359,
                            store: Ext.data.StoreManager.lookup('simpsonsStore4'),
                            title: '',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'telNumber',
                                    width:400,
                                    text: '手机号'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'imsi',
                                    width:400,
                                    text: 'IMSI'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'mobtype',
                                    width:400,
                                    text: '移动网络类型'
                                }
                            ],
                            viewConfig: {

                            },
                            selModel: Ext.create('Ext.selection.CheckboxModel', {
                            })
                        },
                        {
                            xtype: 'pagingtoolbar',
                            store: Ext.data.StoreManager.lookup('simpsonsStore4'),
                            width: 1359,
                            beforePageText:'当前是第',
            afterPageText:'页,共{0}页',
            firstText:'首页',
            prevText:'上一页',
            nextText:'下一页',
            lastText:'尾页',
            refreshText:'刷新',
                            pageSize: 25,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: '没有数据'
                        }
                    ]
                }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});


Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('MyApp.view.ui.MyViewport', {
            renderTo : Ext.getBody()
        });
       
    }
});




//预审store
Ext.define('MyUser', {
    extend: 'Ext.data.Model',
    fields:[{name:'telNumber',type:'number'},
            {name:'imsi',type:'string'},
            {name:'mobtype',type:'string'},
            {name:'check',type:'boolean'}]
});

var store=Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    model : 'MyUser',
    autoLoad:true,
    data:{'items':[
        // { 'telNumber': '15698265461',  'imsi':'68','mobtype':'北京市海淀区4084' },
     
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

//审核store
Ext.define('MyUser2', {
    extend: 'Ext.data.Model',
    fields:[{name:'telNumber',type:'number'},
            {name:'imsi',type:'string'},
            {name:'mobtype',type:'string'}]
});

var store2=Ext.create('Ext.data.Store', {

    storeId:'simpsonsStore2',
    model : 'MyUser2',
    autoLoad:true,
    data:{'items':[
     
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

//表1store
Ext.define('MyUser3', {
    extend: 'Ext.data.Model',
    fields:[{name:'telNumber',type:'number'},
            {name:'imsi',type:'string'},
            {name:'mobtype',type:'string'}]
});

var store3=Ext.create('Ext.data.Store', {

    storeId:'simpsonsStore3',
    model : 'MyUser3',
    autoLoad:true,
    data:{'items':[
     
       
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

//表2
Ext.define('MyUser4', {
    extend: 'Ext.data.Model',
    fields:[{name:'telNumber',type:'number'},
            {name:'imsi',type:'string'},
            {name:'mobtype',type:'string'}]
});

var store4=Ext.create('Ext.data.Store', {

    storeId:'simpsonsStore4',
    model : 'MyUser4',
    autoLoad:true,
    data:{'items':[
    
       
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

//添加弹窗
Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',
    resizable: true,
    modal: true,
    height: 200,
    width: 311,
    title: '添加',
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    height: 180,
                    width: 299,
                    bodyPadding: 10,
                    title: '',
                    items: [
                        {
                            xtype: 'fieldset',
                            height: 115,
                            title: '信息',
                            items: [
                                {
                                    xtype: 'textfield',
                                    id:'mobNumber',
                            fieldLabel: '手机号',
                            allowBlank:false,
                            blankText:'请输入手机号码',
                            regex:/^1[3|4|5|8][0-9]\d{4,8}$/,
                    regexText:'请输入11位正确格式的手机号',
                                    anchor: '100%'
                                },
                                {
                                    xtype: 'textfield',
                                    id:'imsiNumber',
                            allowBlank:false,
                            blankText:'请输入IMSI号码',
                            fieldLabel: 'IMSI',
                                    anchor: '100%'
                                },
                                {
                                    xtype: 'combobox',
                                    id:'mobelType',
                            fieldLabel: '移动网络类型',
                            allowBlank:false,
                            blankText:'请选择移动网络类型',
                            store: combostore,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
                                    anchor: '100%'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            width: 55,
                            text: '确认',
                            handler:function() {
                            store.insert(0,{
                            telNumber: Ext.getCmp("mobNumber").getValue(),
                            imsi:Ext.getCmp("imsiNumber").getValue(),
                            mobtype:Ext.getCmp("mobelType").getValue()
                            });
                         
                            
                           }
                        },
                        {
                            xtype: 'button',
                            margin: '0 0 0 10',
                            width: 55,
                            text: '重置',
                            handler : function() {
                    Ext.getCmp('mobNumber').reset();
                    Ext.getCmp('imsiNumber').reset();
                    Ext.getCmp('mobelType').reset();
                          }
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});


//移动网络类型combostore
var combostore = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"QQ", "name":"QQ"},
        {"abbr":"新浪微博", "name":"新浪微博"},
        {"abbr":"UC浏览器", "name":"UC浏览器"}
        //...
    ]
});

var win;
  function showContactForm() {
        win = Ext.create('MyApp.view.MyWindow', {
        });
     
        win.show();
  }
 
//预审修改
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2
    });


发布见图片
  • 大小: 45.3 KB
0
顶
0
踩
分享到：
| flex 苹果鱼眼效果及win7窗体效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS grid过滤操作

    ExtJS grid过滤操作，可以动态操作本地的store更改筛选的内容

    extjsDemo(store grid form mvc模式等一些demo)

    Extjs 4.2 --store grid form mvc模式等一些demo

    extjs4 对各类型store各种数据的读取 model 前台 等等

    extjs4 对多种store数据 ，以多种方式绑定到界面上，以一例子以说明编写

    Extjs4 关于Store的一些操作(加载/回调/添加)

    1、关于加载和回调的问题 ExtJs的Store在加载时候一般是延迟加载的，这时候Grid就会先出现一片空白，等加载完成后才出现数据；因此，我们需要给它添加一个提示信息！ 但是Store却没有waitMsg属性。 解决方案： 1.给...

    extjs grid数据导出excel文件

    EXTJS中grid控件数据导出excel示例。很好理解。

    免费 Extjs4.0教程视频

    第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...

    Extjs教程源码

    第六讲: EXTJS4.0的数据集Store 第七讲: EXTJS4.0的事件机制Event 第八讲: EXTJS4.0的Ajax 第九讲: EXTJS4.0的Core包和Ext类 第十讲: EXTJS4.0的Util包 ***************第二部分高级组件**************** 第十一讲:...

    EXTJS4.0视频教程配套代码

    第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...

    ExtJs4.1 treegrid CRUD 读取、新增、修改、删除

    实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...

    Extjs4.0视频教程和源代码，另附文档翻译

    第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...

    ExtJS6.5.0+SSM表格增删改查+分页

    1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页，数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全，加载即可运行 5.VX：humingxing可随时交流

    extjs grid取到数据而不显示的解决

    找了快1个小时，就是不知道错误在哪里。。。郁闷 我在鼠标左侧点击tree节点，在右侧创建一个标签页，这个已经能够实现，...但是我用添加事件后在其中管理就出问题了。 文件都是封装在类包里面的。所以只贴关键部分 这是

    精通JS脚本之ExtJS框架.part2.rar

    分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...

    深入浅析Extjs中store分组功能的使用方法

    在项目实践的过程中，遇到需要将grid中数据根据某一字段分组的要求，当然，这个功能在api中有，在此列出来以供大家查找： 两点需要注意的地方： 1、在创建store时，需要设置groupField属性的值，即为需要分组的值 ...

    轻松搞定Extjs_原创

    这是我花费数月写的关于Extjs的原创教程，共29个章节。下面是目录： 目 录 1 第一章：序 6 第二章：准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章：Ext ...

    Extjs exporter

    导出Extjs中的store的数据为excel，前段js导出。 Export store to Excel Well, here's an exporter that can export a grid, tree or simply a store to excel. It's a fork from another project, I adapted it ...

    ExtJs 实现动态加载grid完整示例

    Ext3.3完整包 Ext3.3中文文档 数据表的结构是：数据表table &gt; 记录record &gt; 字段 store的结构是: Ext.data.Store &gt; Ext.data.Record&gt;Ext.dataDataField store 首先驱动 DataProxy 加载数据 ，DataProxy加载完成会...

    Extjs5.0从入门到实战开发信息管理系统（Extjs基础、Extjs5新特性、Spring、Spring mvc）

    Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单（及其验证方法），数据组件： store，model等，讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。

    EXT-JS Grid 用法

    EXT-JS Grid 用法 用EXT Designer 工具设计，步骤清晰详尽。

    extjs学习案例， 例子有 panel ,widow,tree,grid,form, store……

    对于初学者来说是一份很好的资料， 对于已学者来说，可以得到一定的提高……

Magicbox
Global site tag (gtag.js) - Google Analytics