新增删除行

app/store/RowManager.js

@@ -0,0 +1,7 @@
+Ext.define('uas.store.RowManager', {
+    extend: 'Ext.data.Store',
+    alias: 'store.row-manager',
+
+    model: 'uas.model.Personnel',
+    data: []
+});

app/view/grid/paging/Panel2.js

@@ -4,7 +4,7 @@ Ext.define('uas.view.grid.paging.Panel2', {
 
     store: {
         type: 'big-data',
-        pageSize: 50,
+        pageSize: 10,
         remoteSort: true,
         autoLoad: true
     },

app/view/grid/rowManager/Panel.js

@@ -0,0 +1,58 @@
+Ext.define('uas.view.grid.rowManager.Panel', {
+    extend: 'Ext.grid.Panel',
+    xtype: 'row-manager',
+
+    controller: 'row-manager',
+
+    requires: [
+        'Ext.grid.plugin.CellEditing',
+        'Ext.ux.grid.plugin.MenuClipboard'
+    ],
+
+    plugins: [{
+        ptype: 'menuclipboard'
+    }, {
+        ptype: 'cellediting',
+        clicksToEdit: 1,
+    }],
+
+    columns: [{
+        xtype: 'rownumberer'
+    }, {
+        text: '姓名',
+        dataIndex: 'name',
+        editor: {
+            xtype: 'textfield'
+        }
+    }, {
+        text: '邮箱',
+        dataIndex: 'email',
+        width: 260,
+        editor: {
+            xtype: 'textfield'
+        }
+    }, {
+        text: '电话',
+        dataIndex: 'phone',
+        width: 180,
+        editor: {
+            xtype: 'numberfield'
+        }
+    }],
+
+    store: {
+        type: 'row-manager',
+        data: [{ name: 'lucy', email: 'lucy@shee.com', phone: '83141231' }]
+    },
+
+    tbar: [{
+        text: '添加行',
+        handler: 'onRowAdd'
+    }, {
+        text: '插入行',
+        handler: 'onRowInsert'
+    }, {
+        text: '删除行',
+        handler: 'onRowRemove'
+    }]
+});

app/view/grid/rowManager/PanelController.js

@@ -0,0 +1,82 @@
+Ext.define('uas.view.grid.rowManager.PanelController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.row-manager',
+
+    onRowInsert: function() {
+        var me = this,
+            grid = me.getView(),
+            selectionModel = grid.getSelectionModel(),
+            currentPosition;
+
+        if(selectionModel.hasSelection()) {
+            currentPosition = me.getSelectedPosition();
+            me.insertRow(currentPosition.rowIdx, 1);
+        }else {
+            Ext.toast('未选中行')
+        }
+    },
+
+    onRowAdd: function() {
+        this.addRow(1);
+    },
+
+    onRowRemove: function() {
+        var me = this,
+            grid = me.getView(),
+            selectionModel = grid.getSelectionModel(),
+            currentPosition;
+
+        if(selectionModel.hasSelection()) {
+            currentPosition = me.getSelectedPosition();
+            me.removeRow(currentPosition.rowIdx);
+        }else {
+            Ext.toast('未选中行')
+        }
+    },
+
+    getSelectedPosition: function() {
+        var me = this,
+            grid = me.getView(),
+            selectionModel = grid.getSelectionModel(),
+            currentPosition;
+
+        if(selectionModel.hasSelection()) {
+            currentPosition = selectionModel.getCurrentPosition();
+            return currentPosition;
+        }else {
+            return null;
+        }
+    },
+
+    insertRow: function(idx, num) {
+        var me = this,
+            grid = me.getView(),
+            store = grid.getStore(),
+            datas = [];
+
+        Ext.Array.each(new Array(num), function() {
+            datas.push({});
+        })
+        store.insert(idx, datas);
+    },
+
+    addRow: function(num) {
+        var me = this,
+            grid = me.getView(),
+            store = grid.getStore(),
+            datas = [];
+
+        Ext.Array.each(new Array(num), function() {
+            datas.push({});
+        })
+        store.add(datas);
+    },
+
+    removeRow: function(idx) {
+        var me = this,
+            grid = me.getView(),
+            store = grid.getStore();
+
+        store.removeAt(idx);
+    },
+})

resources/json/navigation.json

@@ -92,6 +92,12 @@
                 "leaf": true,
                 "target": "big-data-grid",
                 "iconCls": "x-fa fa-smile-o"
+            },
+            {
+                "text": "新增/删除行",
+                "leaf": true,
+                "target": "row-manager",
+                "iconCls": "x-fa fa-smile-o"
             }
         ]
     },

server/data/bigData.js

@@ -1,10 +1,10 @@
-var data = (function(){
+var func = function(min, max){
     let arr = [];
     const foreNames = ["Nige","Jamie","Jay","Nicolas","Tommy","David","Ed","Dave","Abe","Adam","Aaron"];
     const surNames = ["Mishcon","White","Davis","Kaneda","Spencer","Avins","Robinson","Elias","Conran","Ferrero","Maintz"];
     const departments = ["Accounting","Administration","Engineering","Managment","Marketing","QA","Sales","Support"];
 
-    const count = Math.round(Math.random()*99 + 1);
+    const count = Math.round(Math.random()*(max - min) + min);
 
     for(let i = 0; i < count; i++) {
         let forename = foreNames[Math.round(Math.random()*(foreNames.length - 1))];
@@ -34,7 +34,9 @@ var data = (function(){
         arr.push(obj);
     }
     return arr;
-})();
+};
+
+var data = func(1, 100);
 
 module.exports = function(query){
     var page = query.page || 1;