Index: lib/GeoExt.js
===================================================================
--- lib/GeoExt.js (revision 486)
+++ lib/GeoExt.js (working copy)
@@ -70,7 +70,8 @@
"GeoExt/data/WMSCapabilitiesStore.js",
"GeoExt/data/ProtocolProxy.js",
"GeoExt/widgets/MapPanel.js",
- "GeoExt/widgets/Popup.js"
+ "GeoExt/widgets/Popup.js",
+ "GeoExt/widgets/form/Form.js"
);
var agent = navigator.userAgent;
Index: lib/GeoExt/widgets/form/Form.js
===================================================================
--- lib/GeoExt/widgets/form/Form.js (revision 0)
+++ lib/GeoExt/widgets/form/Form.js (revision 0)
@@ -0,0 +1,334 @@
+/* Copyright (C) 2008-2009 The Open Source Geospatial Foundation
+ * Published under the BSD license.
+ * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text
+ * of the license.
+ *
+ * pending approval */
+
+Ext.namespace("GeoExt.form");
+
+/**
+ * Function: GeoExt.form.filterFromForm
+ * Create an {OpenLayers.Filter} object from a {Ext.form.BasicForm}
+ * instance or a {Ext.form.FormPanel}.
+ *
+ * Parameters:
+ * form - {Ext.form.BasicForm|Ext.form.FormPanel}
+ * logicalOp - {String} Either {OpenLayers.Filter.Logical.AND}
+ * or {OpenLayers.Filter.Logical.OR}, set to
+ * {OpenLayers.Filter.Logical.AND} if null or
+ * undefined.
+ *
+ * Returns:
+ * {OpenLayers.Filter}
+ */
+GeoExt.form.filterFromForm = function(form, logicalOp) {
+ if(form instanceof Ext.form.FormPanel) {
+ form = form.getForm();
+ }
+ var filters = [], values = form.getValues(false);
+ for(var prop in values) {
+ var s = prop.split("__");
+
+ var value = values[prop], type;
+
+ if(s.length > 1 &&
+ (type = GeoExt.form.filterFromForm.FILTER_MAP[s[1]]) !== undefined) {
+ prop = s[0];
+ } else {
+ type = OpenLayers.Filter.Comparison.EQUAL_TO;
+ }
+
+ filters.push(
+ new OpenLayers.Filter.Comparison({
+ type: type,
+ value: value,
+ property: prop
+ })
+ );
+ }
+
+ return new OpenLayers.Filter.Logical({
+ type: logicalOp || OpenLayers.Filter.Logical.AND,
+ filters: filters
+ });
+};
+
+/**
+ * Constant: GeoExt.form.filterFromForm.FILTER_MAP
+ * An object mapping operator strings as found in field names to
+ * {OpenLayers.Filter.Comparison} types.
+ */
+GeoExt.form.filterFromForm.FILTER_MAP = {
+ "eq": OpenLayers.Filter.Comparison.EQUAL_TO,
+ "ne": OpenLayers.Filter.Comparison.NOT_EQUAL_TO,
+ "lt": OpenLayers.Filter.Comparison.LESS_THAN,
+ "le": OpenLayers.Filter.Comparison.LESS_THAN_OR_EQUAL_TO,
+ "gt": OpenLayers.Filter.Comparison.GREATER_THAN,
+ "ge": OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
+ "like": OpenLayers.Filter.Comparison.LIKE
+};
+
+/**
+ * Class: GeoExt.form.SearchAction
+ * An specific {Ext.form.Action} to be used when using a form to do
+ * trigger search requests througn an {OpenLayers.Protocol}.
+ *
+ * This action builds an {OpenLayers.Filter} from the form and passes
+ * this filter to its protocol's read method. The form fields must be
+ * named after a specific convention so that an appropriate
+ * {OpenLayers.Filter.Comparison} filter is created for each
+ * field. For example a field with the name "foo__like" would
+ * result in an {OpenLayers.Filter.Comparison} of type
+ * {OpenLayers.Filter.Comparison.LIKE}. Here is the convention:
+ * * __eq: {OpenLayers.Filter.Comparison.EQUAL_TO}
+ * * __ne: {OpenLayers.Filter.Comparison.NOT_EQUAL_TO}
+ * * __lt: {OpenLayers.Filter.Comparison.LESS_THAN}
+ * * __le: {OpenLayers.Filter.Comparison.LESS_THAN_OR_EQUAL_TO}
+ * * __gt: {OpenLayers.Filter.Comparison.GREATER_THAN}
+ * * __ge: {OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO}
+ * * __like: {OpenLayers.Filter.Comparison.LIKE}
+ *
+ * In most cases your would not directly create {GeoExt.form.SearchAction}
+ * objects, but use {} instead.
+ *
+ * Example:
+ *
+ * (start code)
+ * var formPanel = new Ext.form.Panel({
+ * renderTo: "formpanel",
+ * items: [{
+ * xtype: "textfield",
+ * name: "name__like",
+ * value: "mont"
+ * }, {
+ * xtype: "textfield",
+ * name: "elevation__ge",
+ * value: "2000"
+ * }]
+ * });
+ *
+ * var searchAction = new GeoExt.form.SearchAction(formPanel.getForm(), {
+ * protocol: new OpenLayers.Protocol.WFS({
+ * url: "http://publicus.opengeo.org/geoserver/wfs",
+ * featureType: "tasmania_roads",
+ * featureNS: "http://www.openplans.org/topp"
+ * })
+ * });
+ *
+ * formPanel.getForm().doAction(searchAction, {
+ * callback: function(response) {
+ * // response.features includes the features read
+ * // from the server through the protocol
+ * }
+ * });
+ * (end)
+ *
+ */
+GeoExt.form.SearchAction = Ext.extend(Ext.form.Action, {
+ /**
+ * Property: type
+ * {String} The action type string.
+ */
+ type: "search",
+
+ /**
+ * APIProperty: response
+ * {OpenLayers.Protocol.Response} A read-only reference to the
+ * OpenLayers.Protocol.Response object resulting from the
+ * search request.
+ */
+ response: null,
+
+ /**
+ * Constructor: GeoExt.form.SearchAction
+ * Creates a SearchAction instance.
+ *
+ * Parameters:
+ * form - {Ext.form.BasicForm} The form.
+ * options - {Object} The options passed to the internal
+ * protocol's read method.
+ */
+ constructor: function(form, options) {
+ GeoExt.form.SearchAction.superclass.constructor.call(this, form, options);
+ },
+
+ /**
+ * Method: run
+ * Run the action.
+ */
+ run: function() {
+ var o = this.options;
+ var f = GeoExt.form.filterFromForm(this.form);
+ if(o.clientValidation === false || this.form.isValid()){
+ this.response = o.protocol.read(
+ Ext.applyIf({
+ filter: f,
+ callback: this.handleResponse,
+ scope: this
+ }, o)
+ );
+ } else if(o.clientValidation !== false){
+ // client validation failed
+ this.failureType = Ext.form.Action.CLIENT_INVALID;
+ this.form.afterAction(this, false);
+ }
+ },
+
+ /**
+ * Method: handleResponse
+ * Handle the response to the search query.
+ *
+ * Parameters:
+ * response - {OpenLayers.Protocol.Response} The OpenLayers response
+ * object.
+ */
+ handleResponse: function(response) {
+ this.response = response;
+ if(response.success()) {
+ this.form.afterAction(this, true);
+ } else {
+ this.form.afterAction(this, false);
+ }
+ var o = this.options;
+ if(o.callback) {
+ o.callback.call(o.scope, response);
+ }
+ }
+});
+
+/**
+ * Class: GeoExt.form.BasicForm
+ * A specific {Ext.form.BasicForm} whose doAction method creates
+ * a {} if it is passed the string
+ * "search" as its first argument.
+ *
+ * In most cases one would not use this class directly, one
+ * would use {} instead.
+ */
+GeoExt.form.BasicForm = Ext.extend(Ext.form.BasicForm, {
+ /**
+ * Property: protocol
+ * {OpenLayers.Protocol} The protocol configured in this
+ * instance.
+ */
+ protocol: null,
+
+ /**
+ * APIMethod: doAction
+ * Performs the action, if the string "search" is passed as the
+ * first argument then a {} is created.
+ *
+ * Parameters:
+ * action - {String|Ext.form.Action} Either the name of the action
+ * or a {Ext.form.Action} instance.
+ * options - {Object} The options passed to the Action constructor.
+ *
+ * Returns:
+ * {} This form.
+ */
+ doAction: function(action, options) {
+ if(action == "search") {
+ options = Ext.applyIf(options || {}, {protocol: this.protocol});
+ action = new GeoExt.form.SearchAction(this, options);
+ }
+ return GeoExt.form.BasicForm.superclass.doAction.call(
+ this, action, options
+ );
+ },
+
+ /**
+ * APIMethod: search
+ * Shortcut to do a search action.
+ *
+ * Parameters:
+ * options - {Object} The options passed to the Action constructor.
+ */
+ search: function(options) {
+ return this.doAction("search", options);
+ }
+});
+
+/**
+ * Class: GeoExt.form.FormPanel
+ *
+ * A specific {Ext.form.FormPanel} whose internal form is a
+ * {} instead of {Ext.form.BasicForm}.
+ * One would use this form to do search requests through
+ * an {OpenLayers.Protocol} object ({OpenLayers.Protocol.WFS}
+ * for example).
+ *
+ * Look at {} to understand how
+ * form fields must be named for appropriate filters to be
+ * passed to the protocol.
+ *
+ * Example:
+ *
+ * (start code)
+ * var formPanel = new GeoExt.form.Panel({
+ * renderTo: "formpanel",
+ * protocol: new OpenLayers.Protocol.WFS({
+ * url: "http://publicus.opengeo.org/geoserver/wfs",
+ * featureType: "tasmania_roads",
+ * featureNS: "http://www.openplans.org/topp"
+ * })
+ * items: [{
+ * xtype: "textfield",
+ * name: "name__ilike",
+ * value: "mont"
+ * }, {
+ * xtype: "textfield",
+ * name: "elevation__ge",
+ * value: "2000"
+ * }],
+ * listeners: {
+ * actioncomplete: function(form, action) {
+ * // this listener triggers when the search request
+ * // is complete, the OpenLayers.Protocol.Response
+ * // resulting from the request is available
+ * // in "action.response"
+ * }
+ * }
+ * });
+ *
+ * formPanel.addButton({
+ * text: "search",
+ * handler: function() {
+ * this.search();
+ * },
+ * scope: formPanel
+ * });
+ * (end)
+ */
+GeoExt.form.FormPanel = Ext.extend(Ext.form.FormPanel, {
+ /**
+ * APIProperty: protocol
+ * {OpenLayers.Protocol} The protocol instance this form panel
+ * is configured with; actions resulting from this form
+ * will be performed through the protocol.
+ */
+ protocol: null,
+
+ /**
+ * Method: createForm
+ * Create the internal {} instance.
+ */
+ createForm: function() {
+ delete this.initialConfig.listeners;
+ return new GeoExt.form.BasicForm(null, this.initialConfig);
+ },
+
+ /**
+ * APIMethod: search
+ * Shortcut to the internal form's search method.
+ *
+ * Parameters:
+ * options - {Object} The options passed to the GeoExt.form.SearchAction
+ * constructor, see {}.
+ */
+ search: function(options) {
+ this.getForm().search(options);
+ }
+});
+
+Ext.reg("gx_formpanel", GeoExt.form.FormPanel);
Index: examples/search-form.js
===================================================================
--- examples/search-form.js (revision 0)
+++ examples/search-form.js (revision 0)
@@ -0,0 +1,65 @@
+
+var formPanel;
+
+Ext.onReady(function() {
+
+ // create a protocol, this protocol is used by the form
+ // to send the search request, this protocol's read
+ // method received an OpenLayers.Filter instance,
+ // which is derived from the content of the form
+ var protocol = new OpenLayers.Protocol({
+ read: function(options) {
+ var f,
+ f = options.filter;
+ OpenLayers.Console.log(f.CLASS_NAME, ",", f.type);
+ f = options.filter.filters[0];
+ OpenLayers.Console.log(f.CLASS_NAME, ",", f.type, ",", f.property, ":", f.value);
+ f = options.filter.filters[1];
+ OpenLayers.Console.log(f.CLASS_NAME, ",", f.type, ",", f.property, ":", f.value);
+ }
+ });
+
+ // create a GeoExt form panel (configured with an OpenLayers.Protocol
+ // instance)
+ formPanel = new GeoExt.form.FormPanel({
+ width: 300,
+ height: 200,
+ protocol: protocol,
+ items: [{
+ xtype: "textfield",
+ name: "name__like",
+ value: "foo",
+ fieldLabel: "name"
+ }, {
+ xtype: "textfield",
+ name: "elevation__ge",
+ value: "1200",
+ fieldLabel: "maximum elevation"
+ }],
+ listeners: {
+ actioncomplete: function(form, action) {
+ // this listener triggers when the search request
+ // is complete, the OpenLayers.Protocol.Response
+ // resulting from the request is available
+ // through "action.response"
+ }
+ }
+ });
+
+ formPanel.addButton({
+ text: "search",
+ handler: function() {
+ // trigger search request, the options passed to doAction
+ // are passed to the protocol's read method, so one
+ // can register a read callback here
+ var o = {
+ callback: function(response) {
+ }
+ };
+ this.search(o);
+ },
+ scope: formPanel
+ });
+
+ formPanel.render("formpanel");
+});
Index: examples/search-form.html
===================================================================
--- examples/search-form.html (revision 0)
+++ examples/search-form.html (revision 0)
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Example of a search form using GeoExt.form.FormPanel
+
+
This example shows how to create a search form based on
+ GeoExt.form.FormPanel. GeoExt.form.FormPanel itself uses an
+ OpenLayers.Protocol object for sending search requests. In this
+ example a fake protocol is used, in a real-life scenario a specific
+ protocol like OpenLayers.Protocol.WFS would be used.
+
+
If you use FireBug open the console to see the OpenLayers.Filter
+ objects created when the search button is hit.
+
+
The js is not minified so it is readable. See search-form.js