ExtJS: location selection control
Many projects currently use information on the location of their clients. These include online stores, dating sites, banking operating resources, and more. This article will be about the element of specifying this kind of information: Ext.ux.locationSelect the ExtJS 2 framework implemented in the field.
A little demo will help answer the question about the need to read further.
It so happened historically that the control element for the choice of location (we will use this word to determine the location, location, and other) is a popup window with a number of interrelated lists that allow you to consistently specify the location part by part. The control in the amount is convenient, inconsistent, but somewhat outdated. Here are the first conspicuous solutions to the cons:
In one of the projects I needed to bypass all of the above and observe the following:
Thanks to the skill and foresight of the ExtJS developers, it is practically no different from using the standard components of this package - creating and applying Ext.ux.locationSelect is as easy as creating a regular panel.
Connection is implemented in the usual manner. If ExtJS is already in use, then you need to connect only the extension itself:
Since the control extends Ext.form.FieldSet , it assumes to see itself in the Ext.FormPanel field, however this is an optional requirement.
Thus, it is possible to include a control in a form by simply adding its configuration object to the form's items:
Non-standard configuration fields are:
All other fields are the legacy of the superclass configuration.
There are tasks when it is necessary to allow choosing a location and at the same time starting a choice with the one that has already been installed - editing personal data, making a move and so on.
For this purpose, the control has a loadLocation () method, which accepts a configuration object of the format {country: integer, region: integer, city: integer} . When you call it, the url specified during creation will be addressed with the transfer of location parameters. If the returned data corresponds to a valid format, then lists with data will be loaded into the corresponding combo boxes, and those parts of the location that were specified in the configuration object will be selected.
Since the control pumps up data using AJAX , it is necessary to “agree” on its communication protocol with the server. There is a fork in the road:
T. o. You can implement the server part in any way with only one requirement - compliance with the format specified above.
A little demo will help answer the question about the need to read further.
Synopsis
It so happened historically that the control element for the choice of location (we will use this word to determine the location, location, and other) is a popup window with a number of interrelated lists that allow you to consistently specify the location part by part. The control in the amount is convenient, inconsistent, but somewhat outdated. Here are the first conspicuous solutions to the cons:
- popup window for reporting to the visitor of the entire control;
- lack of caching of select data;
- weak extensibility - any functionality must be implemented independently.
What you need to get
In one of the projects I needed to bypass all of the above and observe the following:
- window based design - the resource is intensively edited and it was decided to make the interface windowed;
- since the page could not be reloaded while working on it for hours, the issue of data caching is very acute;
- It is necessary not only to allow the selection of locations, but also to correctly display them, in such, for example, situations like editing, when all selects are already marked and the corresponding lists are already loaded into them.
Control in action
Thanks to the skill and foresight of the ExtJS developers, it is practically no different from using the standard components of this package - creating and applying Ext.ux.locationSelect is as easy as creating a regular panel.
Connection
Connection is implemented in the usual manner. If ExtJS is already in use, then you need to connect only the extension itself:
<head>
<script type = "text / javascript" src = "/ lib / ext / adapter / ext / ext-base.js"> </ script>
<script type = "text / javascript" src = "/ lib / ext / ext-all.js"> </ script>
<script type = "text / javascript" src = "/ lib / ext / ux / locationSelect.js"> </ script>
<link href = "/ lib / ext / resources / css / ext-all.css" rel = "stylesheet" type = "text / css" />
</ head>
for check:
use the correct document doctype, often many nontrivialities can be solved once and for all just by starting to work in the correct mode.
Configuring and creating
Since the control extends Ext.form.FieldSet , it assumes to see itself in the Ext.FormPanel field, however this is an optional requirement.
important:
A detailed description of the API , configurations and a few examples for each of the controls can be found in the ExtJS API Documentation in the corresponding part of the component tree, packages and classes.
Thus, it is possible to include a control in a form by simply adding its configuration object to the form's items:
var myForm = new Ext.form.FormPanel ({
items: [{
xtype: 'locationselect',
url: '/ someURL',
prefix: 'some_location_',
title: 'someFieldSetTitle',
valueNotFoundText: 'Doesn't matter',
validator: function () {/ * some js-code * /}
autoHeight: true
cache: someCacheVar
}]
});
Non-standard configuration fields are:
- url - address where the control storages will apply for lists of parts of locations (countries, regions and cities), a request will be sent to the same address for a full one-time download of the entire location. For example, Russia | Ryazan region | Ryazan;
- prefix - prefix of variable names in which IDs of parts of the location will be stored. For the case above, when the sub-control is “generated” and sends to the server the variables _some_location_country , _some_location_region , _some_location_city ;
- valueNotFoundText - the value of this field will be assigned to the same-name configuration field of all Ext.form.ComboBox controls;
- validator - the function will be called at the event of selecting any part of the location and will allow, for example, to oblige to specify the location completely;
- cache is a global variable passed by reference, which will be the storage cache of all loadable data. If you create several controls, passing the same cache variable to their constructors, then the controls will use a single cache for all, thereby saving resources. In case the parameter is omitted, the cache for the control will be local, defined inside.
about imperceptible:
Note the underscore character in the names of the variables generated by the prefix. The fact is that the combobox in the ExtJS implementation consists of two input fields - one of which sends the value when the form is submitted; You have to generate two similar names for each combo box.
All other fields are the legacy of the superclass configuration.
Download the entire location
There are tasks when it is necessary to allow choosing a location and at the same time starting a choice with the one that has already been installed - editing personal data, making a move and so on.
For this purpose, the control has a loadLocation () method, which accepts a configuration object of the format {country: integer, region: integer, city: integer} . When you call it, the url specified during creation will be addressed with the transfer of location parameters. If the returned data corresponds to a valid format, then lists with data will be loaded into the corresponding combo boxes, and those parts of the location that were specified in the configuration object will be selected.
Data format
Since the control pumps up data using AJAX , it is necessary to “agree” on its communication protocol with the server. There is a fork in the road:
- When selecting any one part of the location through the combo box, the control “counts” on one array with values ​​for the next combo box in the json-format {rows: [{id: numeric, name: string}, ...]} ;
- When the location is fully loaded, the control needs arrays for the last two combo boxes at a time in json-format {rows: {region: [{id: numeric, name: string}, ...], city: [{id: numeric, name: string} ...]}} .
T. o. You can implement the server part in any way with only one requirement - compliance with the format specified above.
Resources
')
Source: https://habr.com/ru/post/21931/
All Articles