EXT2联动选框（Linked Combos Tutorial for Ext 2）

2008-05-24 836

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Tutorial:EXT2联动选框 From Learn About the Ext JavaScript Library Jump to: navigation, search Summary: Very simple example of linked combos ...

Tutorial:EXT2联动选框

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: Very simple example of linked combos for Ext 2

Author: Jozef Sakalos

Published: October 20, 2007

Ext Version: 2.0

Languages:

English

[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



<html>
<head>
    <meta>
    <link>
    <script></script>
    <script></script>
    <script></script>
    
    <script>
        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. = ;
 
Ext., , ;
 
LCombo. = 
     , 
    ,, 
    ,, 
    ,, 
;
 
LCombo. = 
     , , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
    ,, , 
;
 

LCombo. =  
    
 
    
 
    
 
    
     
 
        
        init:  
             form =  Ext.
                 renderTo:document.
                ,width: 
                ,height: 
                ,style:
                ,bodyStyle:
                ,title:
                ,defaults: xtype:
                ,items:
                     fieldLabel:
                    ,displayField:
                    ,valueField:
                    ,store:  Ext..
                         fields:, 
                        ,data:LCombo.
                    
                    ,triggerAction:
                    ,mode:
                    ,listeners:select:fn:combo, value 
                         comboCity = Ext.;        
                        comboCity.;
                        comboCity.., combo.;
                        
                    
 
                ,
                     fieldLabel:
                    ,displayField:
                    ,valueField:
                    ,id:
                    ,store:  Ext..
                         fields:, , 
                        ,data:LCombo.
                    
                    ,triggerAction:
                    ,mode:
                    ,lastQuery:
                
            ;
        
    ;
;

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.

Retrieved from " http://extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2"

EXT2联动选框（Linked Combos Tutorial for Ext 2）

Tutorial:EXT2联动选框

From Learn About the Ext JavaScript Library