列表筛选头代码提交

app/Application.js

@@ -1,7 +1,8 @@
-/**
- * The main application class. An instance of this class is created by app.js when it
- * calls Ext.application(). This is the ideal place to handle application launch and
- * initialization details.
+/*
+ * @Description: 
+ * @Author: hy
+ * @Date: 2019-08-12 17:59:33
+ * @LastEditTime: 2019-08-13 14:05:09
  */
 Ext.define('uas.Application', {
     extend: 'Ext.app.Application',
@@ -20,7 +21,9 @@ Ext.define('uas.Application', {
         });
 
         if (!Ext.platformTags.test) {
-            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
+            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider',{
+                expires: new Date(new Date().getTime()+(1000*60*60*24*30)) //30 days
+            }));
         }
     },
 

app/Application.scss

@@ -13,6 +13,10 @@ $enable-font-awesome: dynamic(true);
   .x-datepicker {
     width: 212px;
   }
+
+  .x-datepicker-cell{
+    border:none !important;
+  }
   
   .x-datepicker-column-header {
     width: 30px;

app/controller/Global.js

@@ -1,3 +1,9 @@
+/*
+ * @Description: 
+ * @Author: hy
+ * @Date: 2019-08-12 17:59:33
+ * @LastEditTime: 2019-08-13 13:44:57
+ */
 Ext.define('uas.controller.Global', {
     extend: 'Ext.app.Controller',
     namespace: 'uas',

app/view/grid/dataList/DataListPanel.js

@@ -2,7 +2,7 @@
  * @Description: 数据列表
  * @Author: hy
  * @Date: 2019-08-12 18:33:04
- * @LastEditTime: 2019-08-13 09:04:44
+ * @LastEditTime: 2019-08-13 14:19:02
  */
 Ext.define('uas.view.grid.dataList.DataListPanel', {
     extend: 'Ext.grid.Panel',
@@ -42,7 +42,7 @@ Ext.define('uas.view.grid.dataList.DataListPanel', {
     columns: [{
         dataIndex: 'id',
         text: 'Id',
-        flex:1,
+        width:50,
 
         // Specify that this column has an associated Filter. This is
         // processed by the gridfilters plugin. If this is a string,
@@ -94,5 +94,13 @@ Ext.define('uas.view.grid.dataList.DataListPanel', {
         dataIndex: 'visible',
         text: 'Visible',
         flex: 1,
+
+        filter: {
+            type:'combo',
+            combo:[
+                ["true", "是"],
+                ["false", "否"]
+            ]
+        }
     }]
 });

app/view/plugins/gridHeaderFilter/GridHeaderFilter.scss

@@ -52,6 +52,8 @@
     background-repeat: no-repeat;
     background:url(get-resource-path('images/clear.png')) no-repeat;
 }
+
+// datepicker
 .x-datepicker-buttons{
     flex-direction: row;
     display: flex;
@@ -60,12 +62,41 @@
     .x-btn-default-small{
         flex: 1;
         padding:2px;
+        border-color: #bdbdbd;
+        background-color: #fff;
     }
     .x-btn-default-toolbar-small{
         height:26px !important;
         padding: 0 2px;
     }
+    .x-btn-default-toolbar-small:hover{
+        border-color: #5897ce;
+        background-color: #5897ce;
+        .x-btn-inner-default-toolbar-small {
+            color: #fff;
+        }
+    }
     .x-btn-inner-default-small {
+        color: #616161;
         padding: 0 2px;
     }
+    .x-btn-default-small:hover{
+        .x-btn-inner-default-small {
+            color: #fff;
+        }
+        flex: 1;
+        padding:2px;
+        border-color: #5897ce;
+        background-color: #5897ce;
+    }
+}
+.x-datepicker2{
+    z-index: 999999 !important;
+}
+.x-datepicker-tbar-active{
+    .x-btn-inner-default-small {
+        color: #fff;
+    }
+    border-color: #5897ce !important;
+    background-color: #5897ce !important;
 }

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

@@ -2,7 +2,7 @@
  * @Description: 筛选头下拉按钮
  * @Author: hy
  * @Date: 2019-08-01 17:48:33
- * @LastEditTime: 2019-08-12 18:38:56
+ * @LastEditTime: 2019-08-13 16:59:01
  */
 Ext.define('uas.view.plugins.gridHeaderFilter.field.OperateButton', {
     extend: 'Ext.button.Button',
@@ -23,7 +23,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.OperateButton', {
         menuhide:function( btn ){
             if( window.event && window.event.target && window.event.target.getAttribute('id') &&
                 (window.event.target.getAttribute('id').indexOf('resetTextField')<0 &&
-                window.event.target.getAttribute('id').indexOf('resetNumberField')<0 &&
+                 window.event.target.getAttribute('id').indexOf('resetNumberField')<0 &&
                  window.event.target.getAttribute('id').indexOf('operateButton')<0) ){
                 btn.changeAnimate(0)
                 btn.onBlur();

app/view/plugins/gridHeaderFilter/field/date/DateTypePicker.js

@@ -2,18 +2,20 @@
  * @Description: 日期筛选头-日期选择组件
  * @Author: hy
  * @Date: 2019-08-12 18:37:09
- * @LastEditTime: 2019-08-12 18:39:58
+ * @LastEditTime: 2019-08-13 17:54:46
  */
 Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
     extend: 'Ext.picker.Date',
     alias: 'widget.dateTypePicker',
     xtype: 'dateTypePicker',
+    nextText: '',
+    prevText: '',
+    monthYearText: '',
     renderTpl: [
         '<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',
-        '<div id="{id}-topButtons" data-ref="topButtons" class="{baseCls}-buttons" role="heading">',
-            '<tpl for="topButtons">',
-                '{%this.renderButtons(values, out)%}',
-            '</tpl>',
+        '<tpl if="showTopButtons">',
+            '<div id="{id}-topButtons" data-ref="topButtons" class="{baseCls}-buttons" role="heading">',
+        '</tpl>',
         '</div>',
         '<div class="{baseCls}-header">',
         '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
@@ -41,10 +43,9 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
         '</tr>',
         '</tbody>',
         '</table>',
-        '<div id="{id}-bottomButtons" data-ref="bottomButtons" class="{baseCls}-buttons" role="presentation">',
-            '<tpl for="bottomButtons">',
-                '{%this.renderButtons(values, out)%}',
-            '</tpl>',
+        '<tpl if="showBottomButtons">',
+            '<div id="{id}-bottomButtons" data-ref="bottomButtons" class="{baseCls}-buttons" role="presentation">',
+        '</tpl>',
         '</div>',
         '</div>',
         {
@@ -63,83 +64,82 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
             },
             renderMonthBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
-            },
-            renderButtons: function(button, out) {
-                Ext.DomHelper.generateMarkup(button.getRenderTree(), out);
             }
         }
     ],
-    beforeRender: function() {
-        /*
-         * days array for looping through 6 full weeks (6 weeks * 7 days)
-         * Note that we explicitly force the size here so the template creates
-         * all the appropriate cells.
-         */
+    onRender: function(container, position) {
         var me = this,
-            encode = Ext.String.htmlEncode,
-            days = new Array(me.numDays),
-            today = Ext.Date.format(new Date(), me.format);
-        if (me.padding && !me.width) {
-            me.cacheWidth();
-        }
+            dateCellSelector = 'div.' + me.baseCls + '-date';
+ 
+        me.callParent(arguments);
+ 
+        me.cells = me.eventEl.select('tbody td');
+        me.textNodes = me.eventEl.query(dateCellSelector);
+        
+        me.eventEl.set({ 'aria-labelledby': me.monthBtn.id });
+ 
+        me.mon(me.eventEl, {
+            scope: me,
+            mousewheel: me.handleMouseWheel,
+            click: {
+                fn: me.handleDateClick,
+                delegate: dateCellSelector
+            }
+        });
+        //添加按钮
+        const tbarEl = document.getElementById(me.id+'-topButtons'),
+              bbarEl = document.getElementById(me.id+'-bottomButtons');
         if (me.showTopButtons){
             me.equal = new Ext.button.Button({
+                renderTo : tbarEl,
                 margin:'5 0 0 8',
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
                 text: '等于',
+                name: 'equal',
                 tabIndex: -1,
                 ariaRole: 'presentation',
-                handler: Ext.emptyFn,
+                handler: me.changeType,
                 scope: me
             });
             me.begin = new Ext.button.Button({
+                renderTo : tbarEl,
                 margin:'5 0 0 0',
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
                 text: '开始于',
+                name: 'begin',
                 tabIndex: -1,
                 ariaRole: 'presentation',
-                handler: Ext.emptyFn,
+                handler: me.changeType,
                 scope: me
             });
             me.end = new Ext.button.Button({
+                renderTo : tbarEl,
                 margin:'5 0 0 0',
+                name: 'end',
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
                 text: '结束于',
                 tabIndex: -1,
                 ariaRole: 'presentation',
-                handler: Ext.emptyFn,
+                handler: me.changeType,
                 scope: me
             });
             me.between = new Ext.button.Button({
+                renderTo : tbarEl,
+                name: 'between',
                 margin:'5 8 0 0',
                 ownerCt: me,
-                ownerLayout: me.getComponentLayout(),
                 text: '介于',
                 tabIndex: -1,
-                ariaRole: 'presentation',
-                handler: Ext.emptyFn,
-                scope: me
+                handler: me.changeType,
+                scope : me
             });
         }
-        me.monthBtn = new Ext.button.Button({
-            ownerCt: me,
-            ownerLayout: me.getComponentLayout(),
-            text: '',
-            tooltip: me.monthYearText,
-            tabIndex: -1,
-            ariaRole: 'presentation',
-            showEmptyMenu: false,
-            menu: [],
-            listeners: {
-                click: me.doShowMonthPicker,
-                scope: me
-            }
-        });
         if (me.showBottomButtons) {
             me.nowDayBtn = new Ext.button.Button({
+                renderTo : bbarEl,
                 margin:'0 0 0 5',
                 ui: me.footerButtonUI,
                 ownerCt: me,
@@ -151,6 +151,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
                 scope: me
             });
             me.nowMonthBtn = new Ext.button.Button({
+                renderTo : bbarEl,
                 ui: me.footerButtonUI,
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
@@ -161,6 +162,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
                 scope: me
             });
             me.preMonthBtn = new Ext.button.Button({
+                renderTo : bbarEl,
                 ui: me.footerButtonUI,
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
@@ -171,6 +173,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
                 scope: me
             });
             me.nowYearBtn = new Ext.button.Button({
+                renderTo : bbarEl,
                 ui: me.footerButtonUI,
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
@@ -181,6 +184,7 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
                 scope: me
             });
             me.preYearBtn = new Ext.button.Button({
+                renderTo : bbarEl,
                 ui: me.footerButtonUI,
                 ownerCt: me,
                 ownerLayout: me.getComponentLayout(),
@@ -191,23 +195,96 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker', {
                 scope: me
             });
         }
-        me.callParent();
-        Ext.applyIf(me, {
-            renderData: {}
-        });
-        Ext.apply(me.renderData, {
-            dayNames: me.dayNames,
-            topButtons: me.showTopButtons?[me.equal,me.begin,me.end,me.between]:[],
-            bottomButtons: me.showBottomButtons?[me.nowDayBtn,me.nowMonthBtn,me.preMonthBtn,me.nowYearBtn,me.preYearBtn]:[],
-            prevText: encode(me.prevText),
-            nextText: encode(me.nextText),
-            todayText: encode(me.todayText),
-            ariaMinText: encode(me.ariaMinText),
-            ariaMaxText: encode(me.ariaMaxText),
-            ariaDisabledDaysText: encode(me.ariaDisabledDaysText),
-            ariaDisabledDatesText: encode(me.ariaDisabledDatesText),
-            days: days
-        });
-        me.protoEl.unselectable();
+    },
+    showMonthPicker: function(animate) {
+        var me = this,
+            el = me.el,
+            picker,
+            datePicker2 = me.pickerField.datePicker2,
+            size;
+        if(me.cls!=='x-datepicker2'&&!datePicker2.hidden){
+            size = {
+                height:el.getSize().height-30,
+                width:el.getSize().width
+            }
+        }else{
+            size = el.getSize();
+        }
+        if (me.rendered && !me.disabled) {
+            picker = me.createMonthPicker();            
+            if (!picker.isVisible()) {
+                picker.setValue(me.getActive());
+                picker.setSize(size);
+ 
+                // Null out floatParent so that the [-1, -1] position is not made relative to this 
+                picker.floatParent = null;
+                picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));
+                if (me.shouldAnimate(animate)) {
+                    me.runAnimation(false);
+                } else {
+                    picker.show();
+                }
+            }
+        }
+        return me;
+    },
+    changeType:function(btn,e){
+        const datePicker = btn.ownerCt,
+              { pickerField,begin,end,equal,between } = datePicker,
+              { datePicker2 } = pickerField,
+              filterContainer = pickerField.ownerCt,
+              { operator } = filterContainer,
+              XY = pickerField.getAlignToXY(pickerField.inputEl),
+              selectCls = 'x-datepicker-tbar-active';
+        if(!btn.hasCls(selectCls)){
+            //移除样式
+            begin.removeCls(selectCls);
+            end.removeCls(selectCls);
+            equal.removeCls(selectCls);
+            between.removeCls(selectCls);
+            //添加选中样式
+            btn.addCls(selectCls);
+            if(btn.text==='介于'){
+                datePicker2.showAt(XY[0],XY[1]+238)
+                pickerField.onFocus();
+                pickerField.focusEl.focus();
+            }else{
+                datePicker2.hide();
+            }
+            operator.operateText = btn.text;
+            operator.operate = btn.name;
+        }
+    },
+    listeners:{
+        beforerender:function(){
+            const me = this;
+            Ext.apply(me.renderData, {
+                showTopButtons: me.showTopButtons,
+                showBottomButtons: me.showBottomButtons,
+            });
+        },
+        select: function(me,date){
+            const { pickerField } = me;
+            const filterContainer = pickerField.ownerCt;
+            const { operator } = filterContainer;
+            var format = 'Y-m-d';
+            var value = '';
+            if(operator.operate==='equal'){
+                value = Ext.Date.format(date,format);
+                pickerField.setValue('='+value);
+                me.hide();
+            }else if(operator.operate==='begin'){
+                value = Ext.Date.format(date,format);
+                pickerField.setValue('>='+value);
+                me.hide();
+            }else if(operator.operate==='end'){
+                value = Ext.Date.format(date,format);
+                pickerField.setValue('<='+value);
+                me.hide();
+            }else if(operator.operate==='between'){
+
+            }
+            pickerField.blur();
+        },
     }
 });

app/view/plugins/gridHeaderFilter/field/date/ResetDateField.js

@@ -2,7 +2,7 @@
  * @Description: 日期筛选头输入框
  * @Author: hy
  * @Date: 2019-08-12 18:37:09
- * @LastEditTime: 2019-08-12 18:40:30
+ * @LastEditTime: 2019-08-13 17:35:24
  */
 Ext.define('uas.view.plugins.gridHeaderFilter.field.date.ResetDateField', {
     extend: 'Ext.form.field.Text',
@@ -41,25 +41,44 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.ResetDateField', {
     listeners:{
         focus: function() {
             const me = this;
-            me.showDatePicker()
+            if(!me.datePicker || me.datePicker.hidden){
+                me.showDatePicker()
+            }
         },
         blur:function(){
             const me = this;
-            me.datePicker&&me.datePicker.hide();
+            if(window.event&&window.event.target&&window.event.target.classList.toString().indexOf('x-datepicker')<0){
+                me.datePicker&&me.datePicker.hide();
+                me.datePicker2&&me.datePicker2.hide();
+            }
         }
     },
     showDatePicker: function () {
         var me = this;
-        const XY = me.getAlignToXY(me.inputEl);
+        const XY = me.getAlignToXY(me.inputEl),
+              filterContainer = me.ownerCt,
+              { operator } = filterContainer,
+              value = me.getValue();
         if(me.datePicker){
             me.datePicker.showAt(...XY);
         }else{
             me.datePicker = me.createDatePicker().showAt(...XY);
+            me.datePicker2 = me.createDatePicker2();
+        }
+        //根据operate设置点击状态
+        const operateBtn = me.datePicker[operator.operate];
+        operateBtn.handler(operateBtn);
+        //根据value设置datePicker
+        if(value){
+
+        }else{
+            
         }
     },
     createDatePicker:function(){
         const me = this;
-        return new Ext.create("uas.view.plugins.gridHeaderFilter.field.date.DateTypePicker",{  
+        return new Ext.create({  
+            xtype:'dateTypePicker',
             pickerField: me,
             floating: true, 
             startDay : 0,
@@ -68,5 +87,18 @@ Ext.define('uas.view.plugins.gridHeaderFilter.field.date.ResetDateField', {
             showTopButtons: true,//顶部逻辑按钮栏
             showBottomButtons: true,//底部快速日期栏
         });
+    },
+    createDatePicker2:function(){
+        const me = this;
+        return new Ext.create({  
+            cls:'x-datepicker2',
+            hidden:true,
+            xtype:'dateTypePicker',
+            pickerField: me,
+            floating: true, 
+            startDay : 0,
+            dataIndex:this.dataIndex,
+            showToday : false
+        });
     }
 });

index.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
 
     <title>uas</title>
+    <link rel="icon" href="./resources/images/favicon.png" type="image/x-icon">
+
 
     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
     <script id="microloader" data-app="87100719-3701-4a39-9b0f-ed5f99833426" type="text/javascript" src="bootstrap.js"></script>