ext 2.0 Combos 使用指南(官方教程2008-3-6)-www.myext.cn,Ext之家

官方教程--查看文章

ext 2.0 Combos 使用指南

发布时间：2008-3-6

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 和 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.

这是ext运用的最小html!

Don't forget to change references to Ext libraries and resources 

according to your Ext installation.

不要忘记按照ext 的图书观和资源 里 部署你的ext!

lcombo.js

  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
                ,width: 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.setValue('');
                        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.

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

[官方教程]ExtJs:xtype的含义 (未知，01-10)

序言根据我在EXT论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。定义xtype就是一个代表类（Class）的标识名字。譬如，你有这个类，名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来……

[官方教程]ExtJs:表单组件初学(二) (未知，01-10)

个教程使用了在表单入门教程中使用过的雇员信息编辑表单。如果你仍然不熟悉如何创建一个表单，你可以首先看一下这个例子。我建议下载用于这个例子的一段程序，这样可能对你有一些帮助。你也可以找一个有效的例子。我们将经历使用表单的整个过程，从最初的从服务器获取数据填入表单，到将数据返回给服务器。在后端我使用……

[官方教程][组图]ExtJS 4 : 更快!更易用!更健壮! 新特性抢先看 (myext，12-05)

Ext JS 4 Preview: 更快!更易用!更健壮!新特性抢先看从 sencha官方的Ext JS Road Map看来我们得到到了Ext JS3.3和4.0将发布的新特性一览表: Ext JS 4.0A brand new plugin system - almost any class i……

[官方教程]ExtJs:Grid组件初学 (未知，01-10)

本文涉及的范例代码，可以在这里下载。一个有效的例子可在这里找到。Contents[hide]1 步骤一定义数据(Data Definition) 1.1 单行的XML样本数据 2 步骤二列模型（Column Model） 2.1 列模型样本 2.2 进行渲染！ if (window.sho……

[官方教程]制定自己的EXT版本 (佚名，03-06)

入门有几种方案可制定Ext，制成裁减过的版本输出。而且这是至关重要的，为什么呢？只需包含你所需的文件，减少部署时文件过大的开销。你可缩小源码大小，也是部署时的重要一环。如果你是技术支持用户有一个可用的SVN访问，你可在开发阶段中创建一个中间临时的版本，用于测试、试用新功能和官……

技术专题

Java C++ PHP Jquery Html javascript

Asp.net C# silverlight android

MS Sql Oracle Mysql

Extjs,最好的javascript,js,ajax,Web前端开发框架，一看都会被它华丽的外表所吸引。

lcombo.html

lcombo.js

lcombo.js

Gotchas