Home > Web Front-end > JS Tutorial > body text

ExtJS drop-down multiple selection box lovcombo_javascript skills

WBOY
Release: 2016-05-16 18:26:49
Original
1418 people have browsed it

At first I thought it was very simple, just add an input checkbox to the option. Unexpectedly, it doesn't work. I searched for some implementation methods on the Internet, mainly using div layers to simulate drop-down. I wanted to follow this idea and write one myself based on the specific application of this project, but found that it was too troublesome. I just happened to be using extjs in another project, and found an extension lovcombo, and studied its own examples (with version 2.3 of extjs, version 3.x seems to have problems). The example is not difficult, the key is to add it to the existing code and change the original code as little as possible.

During the use of drop-down multi-select boxes, a lot of logic is mainly focused on the configuration of the data source store and the processing of select events. The data and UI separation model of extjs itself makes the implementation of cascade very easy. Just update the store of the city drop-down box in the select event of the province drop-down box. A small thing to note is that when an option is selected, the value of checkField needs to be used to determine whether the option is selected or canceled. There are also options for selecting all, deselecting all (the two lovcombos have their own methods selectAll and deselectAll) and the number of selected options (you need to traverse the store and detect the checkField value of each item).

Copy code The code is as follows:

//Select event of drop-down box
select:function(combo, record, index)
{
//Selected
if(record.get(this.checkField))
{
//Processing logic when selected
}
else
{
//Unchecked
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template