merge

app/data/DataList.js

@@ -1,68 +0,0 @@
-/*
- * @Description: 
- * @Author: hy
- * @Date: 2019-08-14 17:41:15
- * @LastEditTime: 2019-08-19 15:50:58
- */
-Ext.define('uas.data.DataList', {
-    requires: [
-        'uas.data.Init'
-    ]
-}, function() {
-    var dataLists = [];
-    for(let i=0;i<1000;i++){
-        dataLists.push({
-            id:(i+1),
-            code:"PU"+(2019081900000001+Number(i))+"",
-            status:(i%5)===0?"已审核":"在录入",
-            date:"2019-08-19",
-            vendor:(i%2)===0?"广东省深圳市南山区供应商A001":"广东省广州市天河区供应商B002",
-            price:(Math.random()*(3000-1000)+10).toFixed(2),
-            currency:"RMB",
-            recordman:"小明",
-            auditman:"大明",
-            special:(i%2)===0?true:false,
-        })
-    }
-
-    //from https://git.daplie.com/Daplie/knuth-shuffle/
-    function shuffle (array) {
-        array = Ext.Array.clone(array);
-
-        var currentIndex = array.length,
-            temporaryValue, randomIndex;
-
-        // While there remain elements to shuffle...
-        while (0 !== currentIndex) {
-            // Pick a remaining element...
-            randomIndex = Math.floor(Math.random() * currentIndex);
-
-            currentIndex -= 1;
-
-            // And swap it with the current element.
-            temporaryValue = array[currentIndex];
-
-            array[currentIndex] = array[randomIndex];
-            array[randomIndex]  = temporaryValue;
-        }
-
-        return array;
-    }
-
-    Ext.ux.ajax.SimManager.register({
-        type: 'json',
-        delay: 300,
-        url:/\/uas\/DataList/,
-
-        data: function(ctx) {
-            //获取过滤条件
-
-            // return Ext.Array.filter(dataLists, function(dataList) {
-            //     return dataList.id > start && dataList.id <= page*limit;
-            // });
-
-            return dataLists
-            
-        }
-    });
-});

app/store/DataListGridStore.js

@@ -2,23 +2,45 @@
  * @Description: 列表store
  * @Author: hy
  * @Date: 2019-08-12 18:34:16
- * @LastEditTime: 2019-08-19 14:53:38
+ * @LastEditTime: 2019-08-19 17:16:28
  */
 Ext.define('uas.store.DataListGridStore', {
     extend: 'Ext.data.Store',
     alias: 'store.dataListGridStore',
     model: 'uas.model.DataListGridModel',
-    pageSize: 30,
+    pageSize: 100,
     proxy: {
         type: 'ajax',
-        url: '/uas/DataList',
+        url: 'http://127.0.0.1:24002/dataList',
         reader: {
             type: 'json',
-            rootProperty: 'data',
+            rootProperty: 'data.list',
             idProperty: 'id',
-            totalProperty: 'total'
+            totalProperty: 'data.total'
         }
     },
     autoLoad:true,
-    remoteSort: false
+    remoteSort: false,
+    listeners:{
+        load: function(store, records, successful, operation, eOpts) {
+            const paging = store.grid.dockedItems.items[3];
+            const pageCount = paging.items.items[5];
+            const pageSize = paging.items.items[13];
+            if(store.totalCount>0){
+                //代替*号
+                if(store.currentPage/10000000>=1){
+                    let page = store.totalCount/store.pageSize;
+                    page = page>parseInt(page)?page+1:page;
+                    store.loadPage(page)
+                }else{
+                    pageCount.update(Ext.String.format(paging.afterPageText,store.currentPage));
+                    pageSize.setValue("行/共"+store.totalCount+"行");
+                }
+            }else{
+                store.totalCount = 999999999;
+                pageCount.update(Ext.String.format(paging.afterPageText,'*'));
+                pageSize.setValue("行/共*行");
+            }
+        }
+    }
 });

app/view/grid/dataList/DataListPaging.js

@@ -0,0 +1,123 @@
+Ext.define('uas.view.grid.dataList.DataListPaging', {
+    extend: 'Ext.toolbar.Paging',
+    xtype: 'dataListPaging',
+    cls:'x-dataListPaging',
+    height: 36,
+
+    dock: 'bottom',
+    displayInfo: false,
+    emptyMsg: "无数据",
+    items:['->',{
+        cls:'x-dl-paging-combo',
+        labelWidth:60,
+        width:150,
+        value:100,
+        labelAlgin:'right',
+        xtype:'combo',
+        editable:false,
+        fieldLabel:'每页显示',
+        store:[[
+            '100',100
+        ],[
+            '200',200
+        ],[
+            '500',500
+        ],[
+            '1000',1000
+        ]],
+        listeners:{
+            change:function(me,newValue){
+                const store = me.ownerCt.ownerCt.store;
+                store.setPageSize(newValue);
+                store.loadPage(1)
+            }
+        }
+    },{
+        cls:'x-dl-paging-display',
+        xtype:'displayfield',
+        value:'行/共*行'
+    }],
+
+    getPagingItems: function() {
+        var me = this,
+            inputListeners = {
+                scope: me,
+                blur: me.onPagingBlur
+            };
+        inputListeners[Ext.supports.SpecialKeyDownRepeat ? 'keydown' : 'keypress'] = me.onPagingKeyDown;
+        return [
+            {
+                itemId: 'first',
+                tooltip: me.firstText,
+                overflowText: me.firstText,
+                iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
+                disabled: true,
+                handler: me.moveFirst,
+                scope: me
+            },
+            {
+                itemId: 'prev',
+                tooltip: me.prevText,
+                overflowText: me.prevText,
+                iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
+                disabled: true,
+                handler: me.movePrevious,
+                scope: me
+            },
+            '-',
+            me.beforePageText,
+            {
+                xtype: 'numberfield',
+                itemId: 'inputItem',
+                name: 'inputItem',
+                cls: Ext.baseCSSPrefix + 'tbar-page-number',
+                allowDecimals: false,
+                minValue: 1,
+                hideTrigger: true,
+                enableKeyEvents: true,
+                keyNavEnabled: false,
+                selectOnFocus: true,
+                submitValue: false,
+                // mark it as not a field so the form will not catch it when getting fields
+                isFormField: false,
+                width: me.inputItemWidth,
+                margin: '-1 2 3 2',
+                listeners: inputListeners
+            },
+            {
+                xtype: 'tbtext',
+                itemId: 'pageCountItem',
+                html: Ext.String.format(me.afterPageText, '*')
+            },
+            '-',
+            {
+                itemId: 'next',
+                tooltip: me.nextText,
+                overflowText: me.nextText,
+                iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
+                disabled: true,
+                handler: me.moveNext,
+                scope: me
+            },
+            {
+                itemId: 'last',
+                tooltip: me.lastText,
+                overflowText: me.lastText,
+                iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
+                disabled: true,
+                handler: me.moveLast,
+                scope: me
+            },
+            '-',
+            {
+                itemId: 'refresh',
+                tooltip: me.refreshText,
+                overflowText: me.refreshText,
+                iconCls: Ext.baseCSSPrefix + 'tbar-loading',
+                disabled: me.store.isLoading(),
+                handler: me.doRefresh,
+                scope: me
+            }
+        ];
+    },
+});

app/view/grid/dataList/DataListPanel.js

@@ -2,51 +2,75 @@
  * @Description: 数据列表
  * @Author: hy
  * @Date: 2019-08-12 18:33:04
- * @LastEditTime: 2019-08-19 14:55:29
+ * @LastEditTime: 2019-08-20 08:54:26
  */
 Ext.define('uas.view.grid.dataList.DataListPanel', {
     extend: 'Ext.grid.Panel',
     xtype: 'dataListPanel',
-
-    requires: [
-        'Ext.toolbar.Paging',
-        'Ext.ux.PreviewPlugin'
-    ],
     
     plugins: {
         gridHeaderFilter: true
     },
 
+    selModel: {
+        type: 'checkboxmodel',
+        checkOnly: true
+    },
+
     emptyText: '无数据',
     loadMask: true,
 
-    viewModel:{
-        stores: {
-            dataListGridStore:{
-                type: 'dataListGridStore',
+    bind:'{dataListGridStore}',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            store: Ext.create('uas.store.DataListGridStore',{
+                grid: me,
                 autoLoad: true,
                 autoDestroy: true
-            }
-        },
-    },
+            })
+        });
 
-    bind:'{dataListGridStore}',
+        me.callParent(arguments);
+    },
 
     // Dispatch named listener and handler methods to this instance
     defaultListenerScope: true,
 
-    tbar: {
+    dockedItems: [{
+        xtype: 'toolbar',
+        dock: 'top',
+        height:40,
+        items:[{
+            xtype:'button',
+            text:'筛选'
+        },{
+            margin:'0 0 0 10',
+            xtype:'button',
+            text:'处理'
+        }]
+    },{
+        xtype: 'toolbar',
+        dock: 'top',
+        height:32,
+        items:[{
+            xtype:'displayfield',
+            value:'查询方案:'
+        }]
+    },{
+        xtype: 'toolbar',
+        dock: 'top',
         name:'filterToolbar',
         height:46,
-        items:['->']
-    },
-
-    bbar: {
-        xtype: 'pagingtoolbar',
-        displayInfo: true,
-        displayMsg: '显示 {0} - {1} 每页显示{3} 共 {2} 行',
-        emptyMsg: "无数据"
-    },
+        items:[{
+            xtype:'displayfield',
+            value:'筛选条件:'
+        },'->']
+    },{
+        xtype: 'dataListPaging'
+    }],
 
     columns: [{
         dataIndex: 'id',

app/view/grid/dataList/DataListPanel.scss

@@ -0,0 +1,41 @@
+.x-dl-paging-display{
+    .x-form-display-field-default{
+        margin-top:7px !important;
+    }
+}
+
+.x-dataListPaging{
+    height:36px;
+    .x-box-inner{
+        height:36px !important;
+        .x-toolbar-text,.x-toolbar-separator{
+            top: 7px !important;
+        }
+        .x-btn{
+            top:0px !important;
+        }
+        .x-dl-paging-combo{
+            .x-form-item-label-default{
+                padding-top:4px;
+            }
+            top:3px !important;
+        }
+        .x-tbar-page-number{
+            top:6px !important;
+        }
+        .x-form-trigger-wrap{
+            height: 20px;
+        }
+        .x-form-text-wrap{
+            height: 15px;
+        }
+        .x-form-text-default{
+            height: 15px;
+            min-height:15px;
+        }
+        .x-form-trigger {
+            height: 20px;
+            display: inline-block;
+        }
+    }
+}

app/view/plugins/gridHeaderFilter/GridHeaderFilter.js

@@ -2,7 +2,7 @@
  * @Description: 列表筛选头
  * @Author: hy
  * @Date: 2019-07-29 15:22:51
- * @LastEditTime: 2019-08-19 09:51:32
+ * @LastEditTime: 2019-08-19 16:05:53
  */
 Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
     extend: 'Ext.plugin.Abstract',
@@ -152,7 +152,12 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         const columns = grid.getColumns();
         const filterToolbar = grid.down('[name=filterToolbar]');
         filterToolbar.removeAll();
+        filterToolbar.add({
+            xtype:'displayfield',
+            value:'筛选条件:'
+        });
         let condition = [];
+        me.grid.nowFilterCondition = [];
         columns.map(column=>{
             if(column.hasHeaderField && column.filterContainer ){
                 let con = column.filterContainer.getCondition();
@@ -189,20 +194,9 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
                 }
             }
         });
-        // condition = Ext.JSON.encodeValue(condition, '\n').replace(/^[ ]+/gm, function (s) {
-        //     for (var r = '', i = s.length; i--;) {
-        //         r += ' ';
-        //     }
-        //     return r;
-        // });
-        // condition = condition.replace(/\n/g, '<br>');
-        // Ext.toast({
-        //     html: condition,
-        //     closable: false,
-        //     align: 't',
-        //     slideDUration: 400,
-        //     maxWidth: 400
-        // });
+        //加载列表
+        me.grid.nowFilterCondition = condition;
+        me.grid.store.load()
     },
 
     /**
@@ -221,6 +215,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         };
         //筛选头容器
         let DateFilter = {
+            grid:me.grid,
             xtype:'filterContainer',
             inputType:config.xtype,
             items:[ config,operator ],
@@ -251,7 +246,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         };
         //加入到表头
         let filterContainer = column.insert(0,DateFilter);
-        filterContainer.render(column.el);
+        //filterContainer.render(column.el);
         //绑定到列
         column.filterContainer = filterContainer;
         filterContainer.items.items.map((item)=>{
@@ -284,6 +279,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         };
         //筛选头容器
         let ComboFilter = {
+            grid:me.grid,
             xtype:'filterContainer',
             inputType:config.xtype,
             items:[ config,operator ],
@@ -314,7 +310,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         };
         //加入到表头
         let filterContainer = column.insert(0,ComboFilter);
-        filterContainer.render(column.el);
+        //filterContainer.render(column.el);
         //绑定到列
         column.filterContainer = filterContainer;
         filterContainer.items.items.map((item)=>{
@@ -417,12 +413,12 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
                 }]
             }
         }
-        //带清除按钮的输入框1 选择逻辑类型为介于时显示
         let config = {
             xtype:'resetNumberField'
         }
         //筛选头容器
         let NumberFilter = {
+            grid:me.grid,
             xtype:'filterContainer',
             inputType:config.xtype,
             items:[ config,operator ],
@@ -453,7 +449,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         }
         //加入到表头
         let filterContainer = column.insert(0,NumberFilter);
-        filterContainer.render(column.el);
+        //filterContainer.render(column.el);
         //绑定到列
         column.filterContainer = filterContainer;
         filterContainer.items.items.map((item)=>{
@@ -546,6 +542,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         }
         //筛选头容器
         let StringFilter = {
+            grid:me.grid,
             xtype:'filterContainer',
             inputType:config.xtype,
             items:[ config, operator ],
@@ -570,7 +567,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.GridHeaderFilter', {
         let filterContainer = column.insert(0,StringFilter);
         //绑定到列
         column.filterContainer = filterContainer;
-        filterContainer.render(column.el);
+        //filterContainer.render(column.el);
         //更改作用域
         filterContainer.items.items.map((item)=>{
             item.on({

app/view/plugins/gridHeaderFilter/field/FilterContainer.js

@@ -2,7 +2,7 @@
  * @Description: 筛选头容器
  * @Author: hy
  * @Date: 2019-08-05 17:29:53
- * @LastEditTime: 2019-08-15 11:31:46
+ * @LastEditTime: 2019-08-19 15:57:47
  */
 Ext.define('uas.view.plugins.gridHeaderFilter.field.FilterContainer', {
     extend: 'Ext.container.Container',
@@ -22,6 +22,6 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.FilterContainer', {
         }
     },
     getGrid:function(){
-        return this.up('dataListPanel');
+        return this.grid;
     }
 });

server/data/dataList.js

@@ -0,0 +1,40 @@
+var dataLists = (function(){
+    let arr = [];
+    for(let i=0;i<1000;i++){
+        arr.push({
+            id:(i+1),
+            code:"PU"+(2019081900000001+Number(i))+"",
+            status:(i%5)===0?"已审核":"在录入",
+            date:"2019-08-19",
+            vendor:(i%2)===0?"广东省深圳市南山区供应商A001":"广东省广州市天河区供应商B002",
+            price:(Math.random()*(3000-1000)+10).toFixed(2),
+            currency:"RMB",
+            recordman:"小明",
+            auditman:"大明",
+            special:(i%2)===0?true:false,
+        })
+    }
+    return arr;
+})();
+
+module.exports = function(query){
+    console.log(query);
+    var page = query.page || 1;
+    var start = query.start || 0;
+    var limit = query.limit || 0;
+    var result = {
+        total:-1
+    };
+
+    if((Number(start)+Number(limit))>=dataLists.length){
+        result.total = dataLists.length
+    }
+
+    if(limit > 0) {
+        result.list = dataLists.slice(start, start + limit);
+    }else {
+        result.list = dataLists;
+    }
+
+    return result;
+}

server/data/index.js

@@ -1,7 +1,9 @@
 var bigData = require('./bigData');
 var comanies = require('./comanies');
+var dataList = require('./dataList');
 
 module.exports = {
     '/bigData': bigData,
     '/comanies': comanies,
+    '/dataList': dataList,
 }

server/getData.js

@@ -15,6 +15,5 @@ module.exports = function(request, response) {
             data: []
         }));
     }
-    // response.write('{"code":200,"msg":"成功","data":[{"id":471,"groupName":"测试小组1","groupIndex":0,"fatherId":381,"createBy":null,"createDate":"2019-07-04T05:36:28.000+0000","updataDate":null,"operate":null},{"id":481,"groupName":"华商龙（上海宇声）","groupIndex":0,"fatherId":-1,"createBy":null,"createDate":"2019-08-01T01:35:57.000+0000","updataDate":null,"operate":null},{"id":381,"groupName":"优软科技标准化测试部","groupIndex":0,"fatherId":-1,"createBy":null,"createDate":"2019-06-05T08:23:11.000+0000","updataDate":null,"operate":null},{"id":383,"groupName":"英唐集团报表","groupIndex":2,"fatherId":-1,"createBy":null,"createDate":"2019-06-05T09:25:11.000+0000","updataDate":null,"operate":null},{"id":382,"groupName":"优软科技标准版","groupIndex":1,"fatherId":-1,"createBy":null,"createDate":"2019-06-05T08:25:11.000+0000","updataDate":null,"operate":null},{"id":421,"groupName":"天二伟业（正式）","groupIndex":3,"fatherId":-1,"createBy":null,"createDate":"2019-06-26T05:56:25.000+0000","updataDate":null,"operate":null}]}');
     response.end();
 }

server/server.js

@@ -9,7 +9,7 @@ var command = require("./command");
  */
 var commandParams = command
     .version('0.0.1')
-    .option('-p, --port <number>', 'change server port', 3000)
+    .option('-p, --port <number>', 'change server port', 3000)//本地调试需改成24002
     .parse(process.argv.slice(2));
     
 var port = commandParams.port;
@@ -35,5 +35,6 @@ function onRequest(request, response) {
     });
     getData(request, response);
 }
+
 http.createServer(onRequest).listen(port);
-console.log('Server started on port ' + port);
+console.log('Server started on port ' + port);