Changeset 3369

Show
Ignore:
Timestamp:
02/16/10 14:42:18 (2 years ago)
Author:
fvanderbiest
Message:

updated filterBuilder code

Location:
sandbox/gislars/sipv/MapFish/client/mfbase/styler/lib/Styler/widgets
Files:
4 modified

Legend:

Unmodified
Added
Removed

  • sandbox/gislars/sipv/MapFish/client/mfbase/styler/lib/Styler/widgets/BaseFilterPanel.js

    r3354 r3369  
    1414    filter: null, 
    1515 
    16     /** 
    17      * Property: deactivable 
    18      * {Boolean} 
    19      */ 
    20     deactivable: false, 
    21  
    22     /** 
    23      * Property: checkbox 
    24      * {Ext.form.CheckBox} 
    25      */ 
    26     checkbox: null, 
    27  
    2816    initComponent: function() { 
    2917         
    3018        var defConfig = { 
    3119            plain: true, 
     20            layout: 'fit', 
    3221            border: false 
    3322        }; 
    … …  
    7261        return []; 
    7362    }, 
    74  
    75     /** 
    76      * Method: createFilterCheckbox 
    77      * Creates a checkbox to temporarily deactivate filter 
    78      */ 
    79     createFilterCheckbox: function() { 
    80         var items = []; 
    81         if (this.deactivable) { 
    82             checkbox = new Ext.form.Checkbox({ 
    83                 checked: true 
    84             }); 
    85             checkbox.on('check', function(cb, checked){ 
    86                 this.filter.removed = !checked; 
    87                 this.fireEvent("change", this.filter); 
    88             }, this); 
    89             items.push({ 
    90                 width: 20, 
    91                 border: false, 
    92                 bodyStyle: 'vertical-align: top', 
    93                 items: [ checkbox ] 
    94             }); 
    95         } 
    96         return items; 
    97     }, 
    9863     
    9964    /** 

  • sandbox/gislars/sipv/MapFish/client/mfbase/styler/lib/Styler/widgets/FilterBuilder.js

    r3354 r3369  
    7777     */ 
    7878    map: null, 
     79     
     80    /** 
     81     * Property: cookieProvider 
     82     * {Ext.state.CookieProvider} The cookie provider 
     83     * Used for storing filters or geometries (if available) ... 
     84     */   
     85    cookieProvider: null, 
    7986 
    8087    /** 
    … …  
    8794        var defConfig = { 
    8895            plain: true, 
     96            layout: 'column', 
     97            defaults: { 
     98                columnWidth: 1 
     99            }, 
    89100            defaultBuilderType: Styler.FilterBuilder.ANY_OF 
    90101        }; 
    … …  
    100111            { 
    101112                xtype: "panel", 
     113                height: 35, 
     114                layout: 'fit', 
    102115                border: false, 
    103116                items: [{ 
    … …  
    134147             *     <getFilter> to get the updated filter. 
    135148             */ 
    136             "change" 
     149            "change", 
     150            /** 
     151             * Event: loading 
     152             * Fires when loading data from server 
     153             */ 
     154            "loading", 
     155            /** 
     156             * Event: loaded 
     157             * Fires when finished loading data from server 
     158             */ 
     159            "loaded" 
    137160        );  
    138161 
    … …  
    227250                group: "querier", 
    228251                text: "sur la base d'un point", 
    229                 iconCls: "drawpoint" 
     252                iconCls: "point" 
    230253            }))); 
    231254        } 
    … …  
    236259                group: "querier", 
    237260                text: "sur la base d'une ligne", 
    238                 iconCls: "drawline" 
     261                iconCls: "linestring" 
    239262            }))); 
    240263        } 
    … …  
    245268                group: "querier", 
    246269                text: "sur la base d'un polygone", 
    247                 iconCls: "drawpolygon" 
     270                iconCls: "polygon" 
    248271            }))); 
    249272        } 
    250  
    251         return new Ext.menu.Menu({ items: items }); 
     273        if (this.cookieProvider) { 
     274            var item = new Ext.menu.CheckItem({ 
     275                text: "sur la base d'une géométrie stockée", 
     276                disabled: !this.cookieProvider.get('geometry', false), 
     277                handler: function() { 
     278                    var wkt = this.cookieProvider.decodeValue( 
     279                        this.cookieProvider.get('geometry') 
     280                    ); 
     281                    this.vectorLayer.addFeatures([ 
     282                        new OpenLayers.Format.WKT().read(wkt) 
     283                    ]); 
     284                }, 
     285                scope: this, 
     286                iconCls: "database" 
     287            }); 
     288            this.cookieProvider.on('statechange', function(cp, key, value){ 
     289                if (key == 'geometry') { 
     290                    if (value.length) { 
     291                        item.enable(); 
     292                    } else { 
     293                        item.disable(); 
     294                    } 
     295                } 
     296            }, this); 
     297            items.push(item); 
     298        } 
     299        return new Ext.menu.Menu({items: items}); 
    252300    }, 
    253301     
    … …  
    265313        var filter; 
    266314        if(this.filter) { 
    267             filter = this.removeUnchecked(this.filter.clone()); 
     315            filter = this.removeUnchecked(this.cloneFilter(this.filter)); 
    268316            if(filter instanceof OpenLayers.Filter.Logical) { 
    269317                filter = this.cleanFilter(filter); 
    … …  
    274322 
    275323    /** 
     324     * Method: cloneFilter 
     325     * A special cloning method which takes care of the "removed" property 
     326     *      
     327     * Parameters: 
     328     * f - {OpenLayers.Filter} A filter. 
     329     * 
     330     * Returns: 
     331     * {OpenLayers.Filter} A filter 
     332     */ 
     333    cloneFilter: function(f) { 
     334        var filter; 
     335        if(f instanceof OpenLayers.Filter.Logical) { 
     336            var filters = []; 
     337            for(var i=0, len=f.filters.length; i<len; ++i) { 
     338                filters.push(this.cloneFilter(f.filters[i])); 
     339            } 
     340            filter = new OpenLayers.Filter.Logical({ 
     341                type: f.type, 
     342                filters: filters 
     343            }); 
     344            if (f.removed === true) { 
     345                filter.removed = true; 
     346            } 
     347        }  else { 
     348            filter = f.clone(); 
     349        } 
     350        return filter; 
     351    }, 
     352 
     353    /** 
    276354     * Method: removeUnchecked 
    277355     * Returns a filter containing only those which have been checked 
     356     * 
     357     * Parameters: 
     358     * filter - {OpenLayers.Filter} A filter. 
    278359     * 
    279360     * Returns: 
    … …  
    283364        if(filter instanceof OpenLayers.Filter.Logical) { 
    284365            var toDelete = []; 
    285             for (var i = 0, l = filter.filters.length; i<l; i++) { 
    286                 if(filter.filters[i] instanceof OpenLayers.Filter.Logical) { 
    287                     filter.filters[i] = this.removeUnchecked(filter.filters[i]); 
     366            var filters = filter.filters; 
     367            for (var i = 0, l = filters.length; i<l; i++) { 
     368                if (filters[i].removed === true) { 
     369                    toDelete.push(filters[i]);  
    288370                } else { 
    289                     if (filter.filters[i].removed === true) { 
    290                         toDelete.push(filter.filters[i]);  
    291                     } 
     371                    filters[i] = this.removeUnchecked(filters[i]); 
    292372                } 
    293373            } 
    294374            for (var j = 0, ll = toDelete.length; j<ll; j++) { 
    295                 OpenLayers.Util.removeItem(filter.filters, toDelete[j]); 
     375                OpenLayers.Util.removeItem(filters, toDelete[j]); 
    296376            } 
    297377        } 
    … …  
    501581            customizeFilterOnInit: (conditionType == "group") && false, 
    502582            listeners: { 
    503                 change: function() { 
     583                "change": function() { 
    504584                    this.fireEvent("change", this); 
     585                }, 
     586                "loaded": function() { 
     587                    this.fireEvent("loaded"); 
     588                }, 
     589                "loading": function() { 
     590                    this.fireEvent("loading"); 
    505591                }, 
    506592                scope: this 
    … …  
    524610                xtype: "gx_spatialfilterpanel", 
    525611                filter: filter, 
    526                 deactivable: this.deactivable, 
     612                cookieProvider: this.cookieProvider, 
    527613                feature: feature, 
    528614                toggleGroup: "querier", 
    … …  
    536622                filter: filter, 
    537623                attributes: this.attributes, 
    538                 deactivable: this.deactivable, 
    539624                filterPanelOptions: Ext.apply({}, this.filterPanelOptions) 
    540625            }); 
    … …  
    592677                scope: this 
    593678            }, 
    594             width: 60 // TODO: move to css 
     679            width: 85 // TODO: move to css 
    595680        }; 
    596681    }, 
    … …  
    641726        this.childFiltersPanel = new Ext.Panel({ 
    642727            border: false, 
    643             defaults: {border: false} 
     728            layout: 'column', 
     729            bufferResize: true, 
     730            defaults: { 
     731                border: false, 
     732                columnWidth: 1 
     733            } 
    644734        }); 
    645735        var grandchildren = this.filter.filters[0].filters; 
    … …  
    655745                filterPanelOptions: Ext.apply({}, this.filterPanelOptions), 
    656746                listeners: { 
    657                     change: function() { 
     747                    "change": function() { 
    658748                        this.fireEvent("change", this); 
     749                    }, 
     750                    "loading": function() { 
     751                        this.fireEvent("loading"); 
     752                    }, 
     753                    "loaded": function() { 
     754                        this.fireEvent("loaded"); 
    659755                    }, 
    660756                    scope: this 
    … …  
    675771     */ 
    676772    newRow: function(filterPanel) { 
    677         var panel = new Ext.Panel({ 
     773        var panel; 
     774        var firstItems = [{ 
     775            border: false, 
     776            bodyStyle: "padding-left: 0.25em;", 
     777            items: [{ 
     778                xtype: "button", 
     779                tooltip: "Supprimer cette condition", 
     780                cls: 'x-btn-icon', 
     781                iconCls: "delete", 
     782                handler: function() { 
     783                    this.removeCondition(panel, filterPanel.filter); 
     784                }, 
     785                scope: this 
     786            }] 
     787        }]; 
     788         
     789        if (this.deactivable) { 
     790            var checkbox = new Ext.form.Checkbox({ 
     791                checked: true 
     792            }); 
     793            checkbox.on('check', function(cb, checked){ 
     794                filterPanel.filter.removed = !checked; 
     795                this.fireEvent("change", filterPanel.filter); 
     796            }, this); 
     797            firstItems.push({ 
     798                bodyStyle: "padding: 0 5px;",  
     799                border: false, 
     800                items: [ checkbox ] 
     801            }); 
     802        } 
     803     
     804        panel = new Ext.Panel({ 
    678805            layout: "column", 
    679806            defaults: {border: false}, 
    680             style: "padding: 0.5em 0.25em;", 
     807            listeners: { 
     808                'resize': function() { 
     809                    this.doLayout(); 
     810                } 
     811            }, 
     812            //style: "padding: 0.25em 0.5em;", // nice look in FF but not in IE 
     813            style: "padding: 0.25em 0;", 
    681814            items: [{ 
    682815                border: false, 
    683                 columnWidth: 0.1, 
    684                 items: [{ 
    685                     xtype: "button", 
    686                     tooltip: "Supprimer cette condition", 
    687                     cls: 'x-btn-icon', 
    688                     iconCls: "delete", 
    689                     handler: function() { 
    690                         this.removeCondition(panel, filterPanel.filter); 
    691                     }, 
    692                     scope: this 
    693                 }] 
     816                width: 60, 
     817                layout: 'column', 
     818                defaults: { 
     819                    columnWidth: 0.5 
     820                }, 
     821                items: firstItems 
    694822            }, { 
    695823                items: [filterPanel], 
    696824                border: false, 
    697                 columnWidth: 0.9 
     825                columnWidth: 1  
    698826            }] 
    699827        }); 
     828         
    700829        return panel; 
    701830    }, 

  • sandbox/gislars/sipv/MapFish/client/mfbase/styler/lib/Styler/widgets/FilterPanel.js

    r3354 r3369  
    6262                }, 
    6363                scope: this 
    64             }, 
    65             width: 120 
     64            } 
    6665        }; 
    6766        this.storeUriProperty = this.filterPanelOptions.values.storeUriProperty; 
    68         this.deactivable = this.filterPanelOptions.deactivable; 
    6967        this.storeOptions = Ext.apply({}, this.filterPanelOptions.values.storeOptions); 
    7068        this.comboOptions = Ext.apply({}, this.filterPanelOptions.values.comboOptions); 
    … …  
    7270        this.attributesComboConfig = Ext.apply({}, this.filterPanelOptions.attributesComboConfig); 
    7371        Ext.applyIf(this.attributesComboConfig, defAttributesComboConfig); 
    74  
     72         
     73        this.addEvents( 
     74            /** 
     75             * Event: loading 
     76             * Fires when loading data from server 
     77             */ 
     78            "loading", 
     79            /** 
     80             * Event: loaded 
     81             * Fires when finished loading data from server 
     82             */ 
     83            "loaded" 
     84        ); 
     85         
    7586        Styler.FilterPanel.superclass.initComponent.call(this); 
    7687    }, 
    … …  
    95106    /** 
    96107     * Method: adaptValueField 
    97      * filter comparison box according to attribute's type  
     108     *  
    98109     * 
    99110     * Parameters: 
    … …  
    101112     */ 
    102113    adaptValueField: function(record) { 
     114        var previousCmp = this.valueContainer.items.items[0]; 
     115        var newCmpWidth = (previousCmp instanceof(Ext.form.ComboBox)) ?  
     116            previousCmp.getSize().width+17 : // 17 = trigger size 
     117            previousCmp.getSize().width; 
     118         
     119        var recordIsDate = (record.get('type')=='dateTime' ||  
     120            record.get('type')=='date'); 
     121         
    103122        if (this.storeUriProperty && record.get(this.storeUriProperty)) { 
    104123            this.setEqualComparison(); 
    105124            var store = new Ext.data.JsonStore(Ext.apply({ 
    106                 url: record.get(this.storeUriProperty) 
     125                url: record.get(this.storeUriProperty), 
     126                listeners: { 
     127                    "beforeload": function(store, options) { 
     128                        this.fireEvent("loading"); 
     129                    }, 
     130                    "loadexception": function() { 
     131                        this.fireEvent("loaded"); 
     132                    }, 
     133                    scope: this 
     134                } 
    107135            }, this.storeOptions)); 
    108136 
    … …  
    110138                store: store, 
    111139                mode: 'local', 
    112                 width: 120, 
     140                width: newCmpWidth,  
    113141                triggerAction: 'all' 
    114142            }, this.comboOptions)); 
    115  
     143             
    116144            store.on('load', function(store, records){ 
    117145                field.setValue(records[0].get(this.comboOptions.valueField)); 
     146                this.fireEvent("loaded"); 
    118147                field.fireEvent('change', field, field.getValue()); 
    119148            }, this); 
     149             
    120150            store.load(); 
    121         } else if (record.get('type')=='dateTime') { 
     151             
     152        } else if (recordIsDate) { 
    122153            var field = new Ext.form.DateField({ 
    123                 width: 120, 
     154                width: newCmpWidth, 
    124155                value: '', 
    125156                format: 'd/m/Y', 
    … …  
    129160        } else { 
    130161            var field = new Ext.form.TextField({ 
    131                 width: 120, 
     162                width: newCmpWidth, 
    132163                value: '', 
    133164                allowBlank: false, 
    … …  
    136167        } 
    137168        field.on('change', function(el, value) { 
    138             if (record.get('type')=='dateTime') { 
     169            if (recordIsDate) { 
    139170                var dt = new Date(value); 
    140171                value = dt.format('c'); 
    … …  
    144175        }, this); 
    145176 
    146         this.valueContainer.remove(this.valueContainer.items.items[0]); 
     177        this.valueContainer.remove(previousCmp); 
    147178        this.valueContainer.add(field); 
    148179        this.valueContainer.doLayout(); 
    … …  
    213244    createFilterItems: function() { 
    214245        this.valueContainer = new Ext.Panel({ 
     246            columnWidth: 0.5, 
    215247            items: [{ 
    216248                xtype: "textfield", 
    217                 width: 120, 
    218249                value: this.filter.value, 
    219250                allowBlank: false, 
    … …  
    226257                    scope: this 
    227258                } 
    228             }] 
     259            }], 
     260            listeners: { 
     261                'resize': function(p, newWidth) { 
     262                    p.findByType("textfield")[0].setWidth(newWidth); 
     263                } 
     264            } 
    229265        }); 
    230266 
    231267        this.comparisonCombo = new Styler.form.ComparisonComboBox({ 
    232268            value: this.filter.type, 
     269            width: 50, 
    233270            blankText: "Ce champ est nécessaire", 
    234271            listeners: { 
    … …  
    240277            } 
    241278        }); 
    242          
    243         var items = this.createFilterCheckbox();         
    244         items.push({ 
    245             width: this.attributesComboConfig.width,  
    246             items: [this.attributesComboConfig] 
    247         }, { 
    248             items: [ this.comparisonCombo ] 
    249         },  
    250         this.valueContainer 
    251         ); 
    252279 
    253280        return [{ 
    … …  
    255282            border: false, 
    256283            defaults: {border: false}, 
    257             items: items 
     284            items: [{ 
     285                items: [this.attributesComboConfig], 
     286                columnWidth: 0.5, 
     287                listeners: { 
     288                    'resize': function(p, newWidth) { 
     289                        p.findByType("combo")[0].setWidth(newWidth); 
     290                    } 
     291                } 
     292            }, { 
     293                width: 56, 
     294                style: "padding: 0 3px;", 
     295                items: [this.comparisonCombo] 
     296            }, this.valueContainer] 
    258297        }]; 
    259298    } 
    260  
    261299}); 
    262300 

  • sandbox/gislars/sipv/MapFish/client/mfbase/styler/lib/Styler/widgets/SpatialFilterPanel.js

    r3354 r3369  
    3434     
    3535    /** 
     36     * Property: cookieProvider 
     37     * {Ext.state.CookieProvider} The cookie provider 
     38     * Used for storing a geometry (if available) ... 
     39     */   
     40    cookieProvider: null, 
     41     
     42    /** 
    3643     * Property: toggleGroup 
    3744     * {String} the toggleGroup for the modify feature button 
    … …  
    117124        var className = this.feature.geometry.CLASS_NAME; 
    118125        var cls = className.substr(className.lastIndexOf('.')+1).toLowerCase(); 
    119         var items = this.createFilterCheckbox();         
    120126        var width = this.comboConfig.width; 
    121127        if (this.deactivable) { 
    … …  
    123129        } 
    124130 
    125         items.push({ 
    126             width: this.comboConfig.width,  
    127             border: false, 
    128             items: [this.comboConfig] 
    129         }); 
     131        var buttonPanels = [{ 
     132            items: [{ 
     133            xtype: "button", 
     134            iconCls: cls, 
     135            tooltip: "Modifier la géométrie", 
     136            enableToggle: true, 
     137            toggleGroup: this.toggleGroup, 
     138            listeners: { 
     139                "toggle": function(btn, pressed) { 
     140                    var feature = this.feature; 
     141                    if (pressed) { 
     142                        var geometry = feature.geometry; 
     143                        if (geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { 
     144                            this.map.setCenter( 
     145                                geometry.getBounds().getCenterLonLat() 
     146                            ); 
     147                        } else { 
     148                            this.map.zoomToExtent( 
     149                                geometry.getBounds().scale(1.05) 
     150                            ); 
     151                        } 
     152                        // zindex hack (might need a rework of the handler feature 's 
     153                        // moveLayerToTop and moveLayerBack methods to manage this) 
     154                        zindex = feature.layer.getZIndex(); 
     155                        this.mfControl.activate(); 
     156                        this.mfControl.selectFeature(feature); 
     157                        feature.layer.setZIndex(this.map.Z_INDEX_BASE['Feature']+1); 
     158                    } else { 
     159                        this.mfControl.unselectFeature(feature); 
     160                        this.mfControl.deactivate(); 
     161                        feature.layer.setZIndex(zindex); 
     162                    } 
     163                }, 
     164                scope: this 
     165            } 
     166            }] 
     167        }]; 
     168         
     169        if (this.cookieProvider) { 
     170            buttonPanels.push({ 
     171                items: [{ 
     172                xtype: "button", 
     173                iconCls: "savegeometry", 
     174                tooltip: "Enregistrer cette géométrie", 
     175                handler: function() { 
     176                    if (this.feature && this.feature.geometry) { 
     177                        this.cookieProvider.set('geometry',  
     178                            this.cookieProvider.encodeValue(this.feature.geometry.toString()) 
     179                        ); 
     180                        alert('Géométrie enregistrée pour 30 jours sur ce navigateur.'); 
     181                    } 
     182                }, 
     183                scope: this 
     184                }] 
     185            }); 
     186        } 
     187 
    130188        return [{ 
    131189            layout: "column", 
    132190            border: false, 
    133             defaults: {border: false}, 
    134             items: [ { 
    135                 width: this.comboConfig.width+20, 
     191            defaults: { 
     192                border: false 
     193            }, 
     194            items: [{ 
     195                width: this.comboConfig.width, 
    136196                layout: 'column', 
    137                 items: items 
     197                items: [{ 
     198                    width: this.comboConfig.width,  
     199                    border: false, 
     200                    items: [this.comboConfig] 
     201                }] 
    138202            }, { 
    139                 items: [{ 
    140                     xtype: "button",  
    141                     iconCls: cls, 
    142                     tooltip: "Modifier la géométrie", 
    143                     enableToggle: true, 
    144                     toggleGroup: this.toggleGroup, 
    145                     listeners: { 
    146                         "toggle": function(btn, pressed) { 
    147                             var feature = this.feature; 
    148                             if (pressed) { 
    149                                 var geometry = feature.geometry; 
    150                                 if (geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { 
    151                                     this.map.setCenter( 
    152                                         geometry.getBounds().getCenterLonLat() 
    153                                     ); 
    154                                 } else { 
    155                                     this.map.zoomToExtent( 
    156                                         geometry.getBounds().scale(1.05) 
    157                                     ); 
    158                                 } 
    159                                 // zindex hack (might need a rework of the handler feature 's 
    160                                 // moveLayerToTop and moveLayerBack methods to manage this) 
    161                                 zindex = feature.layer.getZIndex(); 
    162                                 this.mfControl.activate(); 
    163                                 this.mfControl.selectFeature(feature); 
    164                                 feature.layer.setZIndex(this.map.Z_INDEX_BASE['Feature']+1); 
    165                             } else { 
    166                                 this.mfControl.unselectFeature(feature); 
    167                                 this.mfControl.deactivate(); 
    168                                 feature.layer.setZIndex(zindex); 
    169                             } 
    170                         }, 
    171                         scope: this 
    172                     } 
    173                 }] 
     203                width: 70, 
     204                layout: 'column', 
     205                defaults: { 
     206                    border: false, 
     207                    bodyStyle: 'padding-left:1em;' 
     208                }, 
     209                items: buttonPanels 
    174210            }] 
    175211        }];