Tutorial:EXT2联动选框
From Learn About the Ext JavaScript Library
| Summary: Very simple example of linked combos for Ext 2 |
| Author: Jozef Sakalos |
| Published: October 20, 2007 |
| Ext Version: 2.0 |
Languages:  English |
Contents[hide] |
Preface
This is more example than tutorial as this is that simple that it only needs a brief explanation than step-by-step approach of proceeding from simple to complex. The whole example consists of two files: lcombo.html and lcombo.js.
lcombo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css"> <script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script> <script type="text/javascript" src="lcombo.js"></script> <!-- A Localization Script File comes here --> <script type="text/javascript"> Ext.onReady(LCombo.app.init, LCombo.app); </script> <title>Linked Combos Example</title> </head> <body> </body> </html>
This is in fact the minimum html markup for an Ext application to run. Don't forget to change references to Ext libraries and resources according to your Ext installation.
lcombo.js
/** * Ext 2.0 Linked Combos Tutorial * by Jozef Sakalos, aka Saki * http://extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2 */ // reference local blank image Ext.BLANK_IMAGE_URL = '../extjs-2.0/resources/images/default/s.gif'; Ext.namespace('LCombo', 'LCombo.countries', 'LCombo.cities'); LCombo.countries = [ ['USA', 'United States of America'] ,['D', 'Germany'] ,['F', 'France'] ,['GB', 'Great Britain'] ]; LCombo.cities = [ [1, 'USA', 'New York'] ,[2, 'USA', 'Cleveland'] ,[3, 'USA', 'Austin'] ,[4, 'USA', 'Los Angeles'] ,[5, 'D', 'Berlin'] ,[6, 'D', 'Bonn'] ,[7, 'F', 'Paris'] ,[8, 'F', 'Nice'] ,[9, 'GB', 'London'] ,[10, 'GB', 'Glasgow'] ,[11, 'GB', 'Liverpool'] ]; // create application LCombo.app = function() { // do NOT access DOM from here; elements don't exist yet // private variables // private functions // public space return { // public methods init: function() { var form = new Ext.FormPanel({ renderTo:document.body , 400 ,height: 300 ,style:'margin:16px' ,bodyStyle:'padding:10px' ,title:'Linked Combos' ,defaults: {xtype:'combo'} ,items:[{ fieldLabel:'Select Country' ,displayField:'country' ,valueField:'cid' ,store: new Ext.data.SimpleStore({ fields:['cid', 'country'] ,data:LCombo.countries }) ,triggerAction:'all' ,mode:'local' ,listeners:{select:{fn:function(combo, value) { var comboCity = Ext.getCmp('combo-city'); comboCity.clearValue(); comboCity.store.filter('cid', combo.getValue()); }} } },{ fieldLabel:'Select City' ,displayField:'city' ,valueField:'id' ,id:'combo-city' ,store: new Ext.data.SimpleStore({ fields:['id', 'cid', 'city'] ,data:LCombo.cities }) ,triggerAction:'all' ,mode:'local' ,lastQuery:'' }] }); } }; }(); // end of app // end of file
A form with two combos is created in this file with two little pieces of magic:
- countries combo (the parent combo) has select event listener that, when executed, filters the cities combo (the child combo) based on the currently selected country
- cities combo has lastQuery:"". This is to fool internal combo filtering routines on the first page load. The cities combo just thinks that it has already been expanded once.
Gotchas
The example is extremely simple and it does not take into account that internal logic of ComboBox filters the store too. That means that if you start to type into the cities combo, the filter set by countries combo select listener is first cleared and then the typed letters are used to filter the cities combo.
If you need more clever application of linked combos the best way is to listen to combo's beforequery event, do your own filtering logic in the event handler and return false to prevent the execution of the internal query logic. Use doQuery method of Ext ComboBox as the model.