ext js之 ComboBox 级联下拉框

View Code 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo_1.aspx.cs" Inherits="ComboBoxTree.Demo.Demo_1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Ext3.0/Ext/adapter/ext/ext-base.js"></script>
    <script src="../Ext3.0/Ext/ext-all.js"></script>
    <script src="../Ext3.0/Ext/src/locale/ext-lang-zh_CN.js"></script>
    <link href="../Ext3.0/Ext/resources/css/ext-all.css" rel="stylesheet" />
    <style type="text/css">
        .body
        {
            color: red;
        }
    </style>
   <script type="text/javascript">
       var provinces = [[1, '北京'], [2, '上海']];
       var cities = new Array();
       cities[1] = [[11, '海淀'], [22, '东城']];
       cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']];
 
       var comboProvinces = new Ext.form.ComboBox({
           store: new Ext.data.SimpleStore({
               fields: ["provinceId", "provinceName"],
               data: provinces
           }),
           listeners: {
               select: function (combo, record, index) {
                   comboCities.clearValue();
                   comboCities.store.loadData(cities[record.data.provinceId]);
               }
           },
           valueField: "provinceId",
           displayField: "provinceName",
           mode: 'local',
           forceSelection: true,
           blankText: '请选择省份',
           emptyText: '请选择省份',
           hiddenName: 'provinceId',
           editable: false,
           triggerAction: 'all',
           allowBlank: true,
           fieldLabel: '请选择省份',
           name: 'provinceId',
           width: 200
       });
       var comboCities = new Ext.form.ComboBox({
           store: new Ext.data.SimpleStore({
               fields: ["cityId", 'cityName'],
               data: []
           }),
           valueField: "cityId",
           displayField: "cityName",
           mode: 'local',
           forceSelection: true,
           blankText: '选择地区',
           emptyText: '选择地区',
           hiddenName: 'cityId',
           editable: false,
           triggerAction: 'all',
           allowBlank: true,
           fieldLabel: '选择地区',
           name: 'cityId',
           width: 200
       });
       Ext.onReady(function () {
           var newCarForm = new Ext.FormPanel({
               frame: true,
               title: 'Car Reviews',
               bodyStyle: 'padding:5px',
               renderTo: "combo",
               width: 500,
               items: [
               comboProvinces, comboCities
               ]
           });
 
       });

    </script>
 
</head>
<body>
    <form id="form1" runat="server">
        <div id="panel">
        </div>
        <div align="center" id="combo"></div>
 
    </form>
</body>
</html>

posted on 2013-03-26 23:04  _o~ 努力！  阅读(597)  评论(0)    收藏  举报

导航