ext2.2打造Ext.form.ComboBox系列--树形结构

本篇介绍了将数据动态绑定到Ext.form.ComboBox,以树状结构的形式显示.采取后台读数据库的方式.提供显示提示消息的效果和改变ComboBox的宽度和高度. 不支持手写和联想功能.

效果图如下:

前台代码如下:

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ComboBoxTree._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="extjs/adapter/ext/ext-base.js" type="text/javascript"></script>

    <script src="extjs/ext-all.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="comboxtree">
        </div>

        <script type="text/javascript">
    function ready() {
        Ext.QuickTips.init();
        var comboTree = new Ext.form.ComboBox
        ({
            store: new Ext.data.SimpleStore({ fields: [], data: [[]] }),
            editable: false, //禁止手写及联想功能
            mode: 'local',
            triggerAction: 'all',
            frame: true,
            border: true,
            //maxHeight: 300,width:200,
            tpl: '<div id="treePanel" style="height:200px;width:144px;"></div>', //html代码
            selectedClass: '',
            onSelect: function() { alert('good'); },
            autoWidth: true,
            //autoHeight:true,
            emptyText: '请选择',
            renderTo: 'comboxtree',
            resizable: true
        });

        var tree = new Ext.tree.TreePanel
        ({
            title: "树状结构",
            animate: true,
            titleCollapse: true,
            root: root,
            singleExpand: true,
            iconCls: "icon-tree",
            autoLoad: false,
            allowDomMove: true,
            frame: true,
            collapsible: true,
            collapsed: false,
            collapseFirst: true,
            border: false
        });
        var loader = new Ext.tree.TreeLoader({ url: "ajax/Default.aspx?Param=1" });
        var root = new Ext.tree.AsyncTreeNode
        ({
            id: "0",
            leaf: false,
            loader: loader,
            text: "产品类别",
            expandable: true,
            expanded: true
        });
        tree.setRootNode(root);
        comboTree.on('expand', function() { tree.render('treePanel'); });
        var tree_click = function(node, e) {
            if (node.attributes.leaf) {
                if (node.isLeaf()) {
                    e.stopEvent();   //非叶子节点则不触发
                }
                comboTree.setValue(node.text);  //设置option值
                comboTree.collapse();   //隐藏option列表
                alert(comboTree.getValue());
            }
        };
        tree.on("click", tree_click);
    }
    Ext.onReady(ready);
        </script>

    </div>
    </form>
</body>
</html>

源代码文件

posted @ 2010-01-21 12:35 魁阅读(815) 评论(2) 编辑收藏举报

刷新页面返回顶部

stray521

ext2.2打造Ext.form.ComboBox系列--树形结构

公告