ExtJS drop-down box multiple selection box lovcombo_javascript skills

Source: Internet
Author: User
For the latest new requirement, you need to use the drop-down box to select provinces and cities for Cascade. At first, I thought it was very simple. Just add an input checkbox in option. I found some implementation methods on the Internet. I used the p layer to simulate the drop-down. I wanted to write one by myself based on this idea and the specific application of this project. It was too troublesome. I used extjs in another project, found an extension lovcombo, and learned its own example (with extjs of Version 2.3, version 3.x seems problematic ). The example is not difficult. The key is to add it to the existing code and change the original code as little as possible.

In the use of the drop-down multi-select box, more logic is processed mainly in the data source store configuration and select event processing. The data and UI separation mode of extjs makes cascade implementation very easy. You only need to update the store in the city drop-down list in the select event in the province drop-down list. Note that when an option is selected, you need to use the checkField value to determine whether the option is selected or canceled. There are also full selection, unall (the two lovcombo comes with the selectAll and deselectAll methods), and the number of selected options (you need to traverse the store and check the checkField value of each item ).

The Code is as follows:


// Select event in the drop-down box
Select: function (combo, record, index)
{
// Select
If (record. get (this. checkField ))
{
// Processing logic when selected
}
Else
{
// Unselected
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.