ext2.2打造Ext.form.ComboBox系列--树形结构
2010-01-21 12:35
288 查看
本篇介绍了将数据动态绑定到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>
源代码文件
效果图如下:
代码
<%@ 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>
源代码文件
相关文章推荐
- EXTJS学习系列提高篇:第二十九篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--树形结构
- EXTJS学习系列提高篇:第二十六篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--静态绑定
- EXTJS学习系列提高篇:第二十七篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--动态绑定
- EXTJS学习系列提高篇:第二十八篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--分页显示
- EXT 第二十二篇,ext2.2打造全新功能grid系列--选择数据篇
- EXT公共控件之带树形结构的ComboBox
- ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)
- ext2.2打造全新功能grid系列--确定删除篇
- EXTJS学习系列提高篇:第十六篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--显示列表篇
- EXTJS学习系列提高篇:第二十二篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--选择数据篇
- mootools系列:打造属于你自己的Popup(弹出框)——基本结构篇
- Ext.form.ComboBox调用store.filterBy失效问题
- Ext.form.field.ComboBox示例
- ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
- Ext.form.ComboBox setValue()初始值设定问题
- Ext.form.ComboBox的模糊过滤
- ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
- ext2.2打造全新功能grid系列--批量删除篇
- Coolite comboBox控件动态显示树形结构(无限树)
- 给Ext.form.ComboBox设置默认选中某项