Extjs 例子：下拉菜单combobox 窗口window 树tree
<script>
var contextPath='<%=contextPath%>';
var TableIDLis;
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree-ct',
animate:true,//以动画形式伸展,收缩子节点
title:"Extjs树",
enableDrag:true,//树的节点可以拖动Drag(效果上是)
enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
trackMouseOver:true,//false则mouseover无效果
useArrows:true,/*是否使用小箭头，不使用小箭头则默认使用+ — 符号来表示可展开的节点的展缩状态*/
collapsible:true, /*整个树是否可以收起来，仅剩一个标题*/
rootVisible:true,//是否显示根节点
autoScroll:true, /*是否自动滚屏*/
//autoHeight:true, /*自动高度*/
width:268,
height:300,
lines:true,//是否有节点之间连接的横竖虚线条
singleExpand: false,/*是否一次只能展开一个节点，默认为 false*/
singleClickExpand: false,
border:true, //边框
frame: true,// 美化界面
checkModel: 'childCascade',
//onlyLeafCheckable: false,
/*checkModel 类型：
'single' : 只允许选择一个结点
'cascade' ：级联选中所有父结点和子结点
'parentCascade' ：级联选中所有父结点
'childCascade' ：级联选中所有子结点
默认情况下，checkModel为'multiple'，也就是多选；onlyLeafCheckable为false，所有结点都可选
*/
/**loader:new Ext.tree.TreeLoader(
{
dataUrl:'getChildNodesFromDB.jsp?ID=0',
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性
}),*/
listeners:{
beforeexpandnode:function(n,bdeep,bbanim){
tree1_node_id=n.id;
parameter={
FJD_ID:tree1_node_id
};
doLoadSqlValue('TestSelectTree',parameter,function(xmlDoc){
array_ByName=mapperSqlValueXml(xmlDoc,"name");
for(iterator=0;iterator<=array_ByName.length;iterator++){
id_z=array_ByName[iterator]["ZJD"].value;
text_str=array_ByName[iterator]["NAME"].value;
tableid=array_ByName[iterator]["ZJD"].value;
if(tree.getNodeById(id_z)==null){
Node2=new Ext.tree.AsyncTreeNode({
id:id_z,
text:text_str,
icon:'images/menu.gif'
});
n.appendChild(Node2);
}
}
});
},
movenode:function(tree,node,oldParent,newParent,index){
newid=newParent.id;
oldid=oldParent.id;
id=node.id;
alert(id+" "+oldid+" "+newid);
parameter={
FJD:newid,
ZJD:id,
oldFJD:oldid
};
doLoadSqlValue('updatetree',parameter,function(xmlDoc){});
}
}
});
tree.on("beforeload",function(node){
if(node.id!="root")
{
node.loader=new Ext.tree.TreeLoader(
{dataUrl:"getChildNodesFromDB.jsp?ID="+node.id,
baseParams:{appfuncId:node.id}
});
}
});
var root = new Ext.tree.AsyncTreeNode({
text: '基础指标库',
id:'0',
icon:'images/menu.gif'
});
root.collapseChildNodes(true);
tree.setRootNode(root);
/*给所有节点注册"check"事件 */
//tree.on("check",function(node,checked){alert(node.text+" 被选中")});
tree.render();
tree.getEl().center();
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: 80
});
//root.expand(); /*初始化时，将根节点下所有节点展开*/
new Ext.Button({
text:"增加节点",
handler:function(){
var window =new Ext.Window({
id:'addwindow',
width:300,
height:100,
plain:true,
items: [ {
baseCls:"x-plain",
layout:"column",
items: [{
columnWidth:.5,
layout:"form",
defaults:{xtype:"textfield", width:100},
labelWidth:70,
baseCls:"x-plain",
items:[
{
fieldLabel:"节点名称"
}
]
},
{
columnWidth:.5,
layout:"form",
style:"padding:10px",
labelWidth:45,
baseCls:"x-plain",
items:[
{comboCities}
]
}]
}],
buttons:[
{text:"确定"},
{text:"取消"}
],
listeners:{
}
}).show();
}
}).render(document.body,"btn");
});
</script>
<body>
<div id="tree-ct"></div>
<div id="btn"></div>
下拉菜单也可以直接：
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: 80
})
这样加入items