查询列表展开收缩高度设置问题

frontend/saas-web/app/view/core/query/QueryFormPanel.js

@@ -20,80 +20,127 @@ Ext.define('saas.view.core.query.QueryFormPanel', {
         labelWidth: 90,
         columnWidth: 0.25,
         blankText: '该字段不能为空',
-	},
-
-    dockedItems: [{
-        width:140,
-        height: 70,
-        xtype: 'toolbar',
-        dock: 'right',
-        items: [{
-            margin:'8 0 0 0',
-            xtype: 'buttongroup',
-            cls:'x-query-buttongroup',
-            items:[{
-                height:32,
-                width:70,
-                style:'min-width: 0px;min-height: 0px;',
-                xtype: 'button',
-                name:'query',
-                text: '查询',
-                handler: 'onQuery',
-            },{
-                style:'min-width: 0px;min-height: 0px;border-color: #fff;background-color: #fff;padding: 0px;margin-top: -1px;margin-left: -2px;',
-                xtype: 'button',
-                iconCls:'x-btn-show',
-                handler: 'showMore',
-                name:'showMore',
-                tooltip:'更多',
-                listeners:{
-                    afterrender:function(b){
-                        var count = window.innerHeight - 110>=800?2:1;
-                        var columnWidthCount = 0;
-                        var items = b.ownerCt.ownerCt.ownerCt.items.items;
-                        Ext.each(items, function(item, index){
-                            if(item.xtype != 'hidden'){
-                                columnWidthCount+= item.columnWidth
-                            }
-                        });
-                        columnWidthCount = Math.ceil(columnWidthCount);
-                        if(columnWidthCount<=count){
-                            b.hide();
-                        }
-                    }
-                }
-            },{
-                name:'hideMore',
-                hidden:true,
-                tooltip:'隐藏',
-                style:'min-width: 0px;min-height: 0px;border-color: #fff;background-color: #fff;padding: 0px;margin-top: -1px;margin-left: -2px;',
-                xtype: 'button',
-                iconCls:'x-btn-hide',
-                handler: 'hideMore'
-            }]
-        },'->']
-    }],
+    },
+    
+    toggleConfig: {
+        showMoreIconCls: 'x-btn-show',
+        shwoMoreTooltip: '更多',
+        hideMoreIconCls: 'x-btn-hide',
+        hideMoreTooltip: '隐藏'
+    },
+
+    initComponent: function() {
+        var me = this,
+        config = me.toggleConfig;
+        
+        Ext.apply(me, {
+            dockedItems: [{
+                width:140,
+                height: 70,
+                xtype: 'toolbar',
+                dock: 'right',
+                items: [{
+                    margin:'8 0 0 0',
+                    xtype: 'buttongroup',
+                    cls:'x-query-buttongroup',
+                    items:[{
+                        height:32,
+                        width:70,
+                        style:'min-width: 0px;min-height: 0px;',
+                        xtype: 'button',
+                        name:'query',
+                        text: '查询',
+                        handler: 'onQuery',
+                    },{
+                        style:'min-width: 0px;min-height: 0px;border-color: #fff;background-color: #fff;padding: 0px;margin-top: -1px;margin-left: -2px;',
+                        xtype: 'button',
+                        handler: function(b) {
+                            var form = b.up('core-query-queryformpanel');
+                            form.toggleShowMore();
+                        },
+                        name:'toggle',
+                        iconCls: config.hideMoreIconCls,
+                        tooltip: config.hideMoreTooltip,
+                    }]
+                },'->']
+            }],
+        });
+
+        me.callParent(arguments);
+    },
 
     listeners: {
-        boxReady:function(form){
+        boxready:function(form){
             if(window.innerHeight - 110 >= 800){
-                form.setHeight(96);
+                form.setFormItemRows(null, true);
+            }else {
+                form.setFormItemRows(1, true);
             }
         },
         beforerender: function(form) {
-            var fiels = form.getForm().getFields();
-            fiels.each(function(f) {
-                f.enableKeyEvents = true;
-                f.on && f.on({
-                    keydown: {
-                        fn: function(th, e, eOpts) {
-                            if(e.keyCode == 13) {
-                                form.up('core-query-querypanel').getController().onQuery()
-                            }
+            form.addItemEvenListeners();
+        }
+    },
+
+    addItemEvenListeners: function() {
+        var me = this,
+        queryPanel = me.up('core-query-querypanel'),
+        fiels = me.getForm().getFields();
+
+        fiels.each(function(f) {
+            f.enableKeyEvents = true;
+            f.on && f.on({
+                keydown: {
+                    fn: function(th, e, eOpts) {
+                        if(e.keyCode == 13) {
+                            queryPanel.getController().onQuery()
                         }
                     }
-                });
+                }
             });
+        });
+    },
+
+    toggleShowMore: function(unanimate) {
+        var me = this,
+        showMore = typeof me.showMore != undefined ? !me.showMore : true,
+        rowItems = me.rowItems,
+        allRows = rowItems.length,
+        rows = showMore ? allRows : 1;
+
+        me.setFormItemRows(rows, unanimate);
+
+        var b = me.dockedItems.items[0].down('[name=query]');
+        b.removeFocusCls();
+        me.updateLayout();
+    },
+
+    setFormItemRows: function(rows, unanimate) {
+        var me = this,
+        rowItems = me.rowItems,
+        allRows = rowItems.length,
+        rows = rows ? rows : allRows,
+        showMore = rows == allRows;
+
+        var n_height = 14 + rows * ( 32 + 10 );
+
+        unanimate ? me.setHeight(n_height) : me.animate({dynamic: true, duration: 500, to: {height: n_height + 'px'}});
+        me.setToggleBtn(showMore);
+        me.showMore = showMore;
+        return rows;
+    },
+
+    setToggleBtn: function(showMore) {
+        var me = this,
+        config = me.toggleConfig,
+        toggleBtn = me.dockedItems.items[0].down('[name=toggle]');
+        
+        if(showMore) {
+            toggleBtn.setIconCls(config.hideMoreIconCls);
+            toggleBtn.setTooltip(config.hideMoreTooltip);
+        }else {
+            toggleBtn.setIconCls(config.showMoreIconCls);
+            toggleBtn.setTooltip(config.shwoMoreTooltip);
         }
     }
 

frontend/saas-web/app/view/core/query/QueryPanel.js

@@ -16,7 +16,6 @@ Ext.define('saas.view.core.query.QueryPanel', {
         reference: 'queryform',
         xtype: 'core-query-queryformpanel',
         width: '100%',
-        height:54,
         margin: '0 0 12 0',
     }, {
         // margin: '12 0 0 0',
@@ -55,14 +54,43 @@ Ext.define('saas.view.core.query.QueryPanel', {
         var me = this,
         items = me.queryFormItems,
         queryForm = me.getQueryForm(),
-        viewModel = me.getViewModel();
+        viewModel = me.getViewModel(),
+        rowItems = [], // 所有行*[[item], ...]
+        t_rowItems = [], // 当前行*[item, ...]
+        t_columnWidth = 0; // 当前行列宽之和
+
+        Ext.Array.each(items, function(item, index) {
+            item.columnWidth = item.columnWidth || 0.25;
 
-        Ext.Array.each(items, function(item) {
             var bind = item.bind,
+            columnWidth = item.columnWidth,
             name = item.name,
             ignore = item.ignore,
             defaultValue = item.defaultValue;
 
+            t_columnWidth += columnWidth;
+
+            if(t_columnWidth > 1) { // 当前行已放不下
+                // 先把上一行放入rowItems，当前行+1，再添加到当前行
+                rowItems.push(Ext.Array.clone(t_rowItems));
+                t_columnWidth = 0;
+                t_rowItems.length = 0;
+                t_rowItems.push(item);
+            }else if(t_columnWidth == 1) { // 刚好放满当前行
+                // 先添加到当前行并放入rowItems，当前行+1
+                t_rowItems.push(item);
+                rowItems.push(Ext.Array.clone(t_rowItems));
+                t_columnWidth = 0;
+                t_rowItems.length = 0;
+            }else { // 当前行未满
+                // 直接放入当前行
+                t_rowItems.push(item); // 添加到当前行
+
+                if(index == items.length - 1) { // 最后一个元素
+                    rowItems.push(Ext.Array.clone(t_rowItems));
+                }
+            }
+
             if(item.xtype == 'numberfield') {
                 Ext.applyIf(item, {
                     hideTrigger: true, // 隐藏trigger
@@ -92,6 +120,8 @@ Ext.define('saas.view.core.query.QueryPanel', {
             }
         });
 
+        queryForm.rowItems = rowItems;
+        queryForm.rows = rowItems.length;
         queryForm.items = items;
     },
 

frontend/saas-web/app/view/core/query/QueryPanelController.js

@@ -22,40 +22,6 @@ Ext.define('saas.view.core.query.QueryPanelController', {
         viewModel.set('moreQuery', false);
         queryGrid.store.loadPage(1);
     },
-    showMore:function (){
-        var me = this,
-        queryPanel = me.getView(),
-        queryForm = queryPanel.down('core-query-queryformpanel');
-        var items = queryForm.items.items;
-        var columnWidthCount = 0;
-        Ext.each(items, function(item, index){
-            if(item.xtype != 'hidden'){
-                columnWidthCount+= item.columnWidth
-            }
-        });
-        columnWidthCount = Math.ceil(columnWidthCount);
-        var count = window.innerHeight - 110>=800?2:1;
-        if(columnWidthCount>count){
-            //展开
-            queryForm.animate({dynamic: true, duration: 500, to: {height: (24+42*columnWidthCount)+'px'}})
-            queryForm.dockedItems.items[0].down('[name=showMore]').hide();
-            queryForm.dockedItems.items[0].down('[name=hideMore]').show();
-            var b = queryForm.dockedItems.items[0].down('[name=query]');
-            b.removeFocusCls();
-        }
-    },
-    hideMore:function (){
-        var me = this,
-        queryPanel = me.getView(),
-        queryForm = queryPanel.down('core-query-queryformpanel');
-        //收缩
-        var count = window.innerHeight - 110>=800?2:1;
-        queryForm.animate({dynamic: true, duration: 500, to: {height: count*56 + 'px'}})
-        queryForm.dockedItems.items[0].down('[name=hideMore]').hide();
-        queryForm.dockedItems.items[0].down('[name=showMore]').show();
-        var b = queryForm.dockedItems.items[0].down('[name=query]');
-        b.removeFocusCls();
-    },
     onMoreQuery: function() {
         var me = this,
         queryPanel = me.getView(),