From 97146acc8f2c0bfb170895683aefa0f0144a036f Mon Sep 17 00:00:00 2001 From: uros Date: Sun, 19 Jan 2020 13:38:14 +0100 Subject: [PATCH] Refactoring tables (masking, title updates, cleaner code), fix popup option as tabpanel (used in relations for now) --- client/site/js/LayerActions.js | 3 +- client/site/js/QGISExtensions.js | 85 +++++++------------------- client/site/js/WebgisInit_functions.js | 53 +++++++++++++--- 3 files changed, 69 insertions(+), 72 deletions(-) diff --git a/client/site/js/LayerActions.js b/client/site/js/LayerActions.js index eb4ea969..119397a5 100644 --- a/client/site/js/LayerActions.js +++ b/client/site/js/LayerActions.js @@ -649,7 +649,8 @@ function openAttTable() { gridResultsPageSize: 20, selectionLayer: myLayerName, formItems: [], - doZoomToExtent: true + doZoomToExtent: true, + maskElement: btm.el ? btm.el : null }); //Ext.getCmp('BottomPanel').setTitle(layer.gridTitle,'x-cols-icon'); diff --git a/client/site/js/QGISExtensions.js b/client/site/js/QGISExtensions.js index 66e71ac9..5ef4975d 100755 --- a/client/site/js/QGISExtensions.js +++ b/client/site/js/QGISExtensions.js @@ -878,6 +878,7 @@ QGIS.SearchPanel = Ext.extend(Ext.Panel, { gridResultsPageSize: 20, gridEditable: false, tabClosable: true, + maskElement: null, constructor: function (config) { config = config || {}; @@ -964,6 +965,11 @@ QGIS.SearchPanel = Ext.extend(Ext.Panel, { onSubmit: function(reload) { + //in case of maskElement not provided we take el of search panel, for other cases maskElement must be provided + if(this.maskElement == null) { + this.maskElement = this.el; + } + if(this.form !== null) { if(this.form.getForm().isValid()===false){ return; @@ -985,29 +991,27 @@ QGIS.SearchPanel = Ext.extend(Ext.Panel, { this.fireEvent("searchformsubmitted"); //loading mask - var maskElement = this; - if(this.gridLocation=='bottom') { - maskElement = Ext.getCmp('BottomPanel'); - } - //moved - // Make sure it's shown and expanded - //maskElement.show(); - //maskElement.collapsible && maskElement.expand(); + var maskElement = this.maskElement; if (this.useWmsRequest) { //alert(maskElement.id); //check if we already have table for layer in case of open table call if (this.resultsGrid !== null && this.resultsGrid.store !== null) { - if (maskElement.id=='BottomPanel' && this.gridResults === this.resultsGrid.store.maxResults && !this.useBbox && !reload) { - maskElement.activate(Ext.getCmp('table_' + this.queryLayer)); + if (this.id=='BottomPanel' && this.gridResults === this.resultsGrid.store.maxResults && !this.useBbox && !reload) { + this.activate(Ext.getCmp('table_' + this.queryLayer)); } else { this.resultsGrid.store.maxResults = this.gridResults; + if(maskElement) { + maskElement.mask(pleaseWaitString[lang], 'x-mask-loading'); + } this.submitGetFeatureInfo(); } } else { - maskElement.el.mask(pleaseWaitString[lang], 'x-mask-loading'); + if(maskElement) { + maskElement.mask(pleaseWaitString[lang], 'x-mask-loading'); + } this.submitGetFeatureInfo(); } } else { @@ -1170,49 +1174,7 @@ QGIS.SearchPanel = Ext.extend(Ext.Panel, { queryLayer: this.queryLayer, gridLocation: this.gridLocation, maxResults: this.gridResults, - gridTitle: this.gridTitle, - listeners: { - datachanged: function() { - //console.log(this.totalCount); - //console.log(this.getTotalCount()); - - var complete = (this.totalCount == this.maxResults) ? false : true; - - //only in this case we update title - if (this.gridLocation =='bottom') { - - var cnt_all = this.totalCount; - var cnt_filt = this.getTotalCount(); - - var tableId = 'table_' + this.queryLayer; - var table = Ext.getCmp(tableId); - - if(table != undefined) { - var loadmore = table.getBottomToolbar().getComponent('loadmore'); - if (loadmore != undefined) - { - if (complete) { - loadmore.setVisible(false); - } else { - loadmore.setVisible(true); - } - } - - if (cnt_filt < cnt_all) { - table.setTitle(this.gridTitle + "* (" + cnt_filt + ")"); - } else { - table.setTitle(this.gridTitle + " (" + cnt_all + ")"); - } - } - } else if (this.gridLocation =='default') { - var grid = Ext.getCmp('SearchPanelResultsGrid'); - if(grid) { - var tt = searchResultString[lang] + " (" + grid.store.totalCount + ")"; - grid.setTitle(tt); - } - } - } - } + gridTitle: this.gridTitle }); } @@ -1226,12 +1188,10 @@ QGIS.SearchPanel = Ext.extend(Ext.Panel, { this.store.loadData(features, false); //remove loading mask - var maskElement = this.el; - if(this.gridLocation=='bottom') { - maskElement = Ext.getCmp('BottomPanel').el; + var maskElement = this.maskElement; + if(maskElement) { + maskElement.unmask(); } - maskElement.unmask(); - //if (destroyStore) { // this.store = null; //} @@ -1260,11 +1220,10 @@ QGIS.SearchPanel = Ext.extend(Ext.Panel, { showFailure: function(msg) { //remove loading mask - var maskElement = this.el; - if(this.gridLocation=='bottom') { - maskElement = Ext.getCmp('BottomPanel').el; + var maskElement = this.maskElement; + if(maskElement) { + maskElement.unmask(); } - maskElement.unmask(); if (msg == "client") { Ext.MessageBox.alert(searchPanelTitleString[lang], missingOrInvalidSearchParams[lang]); diff --git a/client/site/js/WebgisInit_functions.js b/client/site/js/WebgisInit_functions.js index 82b06cdf..1a3a9e2e 100644 --- a/client/site/js/WebgisInit_functions.js +++ b/client/site/js/WebgisInit_functions.js @@ -1657,20 +1657,30 @@ function showSearchPanelResults(searchPanelInstance, features) { break; case 'popup': - if (typeof(Ext.getCmp('SearchResultsPopUp')) == 'undefined') { - targetComponent = new Ext.Window( + var win = Ext.getCmp('window_'+searchPanelInstance.selectionLayer); + //searchPanelId = 'popup_'+searchPanelInstance.queryLayer; + if (typeof(win) == 'undefined') { + new Ext.Window( { - id: 'SearchResultsPopUp', + id: 'window_'+searchPanelInstance.selectionLayer, layout: 'fit', - width: "80%", - height: 300, + width: "60%", + height: 250, modal: false, - closeAction: 'hide' - }); + title: searchPanelInstance.selectionLayer, + items: [{ + xtype: 'tabpanel', + title: '' + }] + //closeAction: 'hide' + }).show(); + win = Ext.getCmp('window_'+searchPanelInstance.selectionLayer); + } else { + win.toFront(); } autoHeight = false; // No scrollbars if true collapsible = false; // No collapsible in popup - targetComponent = Ext.getCmp('SearchResultsPopUp'); + targetComponent = win.items.item(0); break; default: collapsible = false; @@ -1821,6 +1831,33 @@ function showSearchPanelResults(searchPanelInstance, features) { }); + //update title and other stuff on store datachanged event + searchPanelInstance.resultsGrid.store.on("datachanged", function() { + var grid = this; + var store = grid.store; + + var cnt_all = store.totalCount; + var cnt_filt = store.getTotalCount(); + + if(grid.getBottomToolbar()) { + var complete = (store.totalCount == store.maxResults) ? false : true; + var loadmore = grid.getBottomToolbar().getComponent('loadmore'); + if (loadmore != undefined) { + if (complete) { + loadmore.setVisible(false); + } else { + loadmore.setVisible(true); + } + } + } + + if (cnt_filt < cnt_all) { + grid.setTitle(store.gridTitle + "* (" + cnt_filt + ")"); + } else { + grid.setTitle(store.gridTitle + " (" + cnt_all + ")"); + } + }, searchPanelInstance.resultsGrid); + //additional buttons in bottom toolbar var toolBar = [{ iconCls: 'x-clearfilter-icon',