Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>Think of Ext2.0 (3)

Think of Ext2.0 (3)

时间：2008-02-28 来源：xiang588

5. Tree

直接使用Ext例子

Tree所需要的json字符串

[{id:300,text:'01',cls:'task-folder',children:[{id:'2',text:'01-01',leaf:true, cls:'task'},{id:'3',text:'01-02',children:[{id:'4',text:'01-02-01',leaf:true},{id:'5',text:'01-02-02',leaf:true}]},{id:'6',text:'01-03',leaf:true}]},{id:'7',text:'02',leaf:true}]

text”-->显示的文本
"id"-->id值，单击事件时可以使用

“leaf”-->Boolean值，如果“叶子”是真的话，则不能包含子节点Children nodes

"cls"-->选用的样式，通常在这里选定图标

”href“-->指定的url，还有一个”hrefTarget“的属性

children –〉表示子节点信息

在Record.css中自定了两个定义的css，task和task-folder

.task .x-tree-node-icon {

background-image:url(icons/cog.png) ;

}

.task-folder .x-tree-node-icon{

background-image:url(icons/folder_go.png) !important;

}

Json字符串中就使用了这个值

Tree使用如下，相对比较简单

var Tree = Ext.tree;

var tree = new Tree.TreePanel(...{

el:'tree-div',

autoScroll:true,

animate:true,

enableDD:true,

containerScroll: true,

loader: new Tree.TreeLoader(...{

dataUrl:'record.jsp'

})

});

// set the root node

var root = new Tree.AsyncTreeNode(...{

text: 'Ext JS',

draggable:false,

id:'source'

});

tree.setRootNode(root);

// render the tree

tree.render();

root.expand();

6. Layout

左边为树型控件，右边为TabPanel，显示的页面

当左边树型控件被点击后，右边的所有的Tab进行变化，访问与树型列表id相对应的页面内容

l 布局使用

布局一般使用Viewport

var viewport = new Ext.Viewport({

只要注意region和el即可

region:'north',

el:'north-div',

el和contentEl的区别

el是第一层div， contentEl一般指向更内部的div

l Tab使用

普通的Tab访问未有无法显示js的问题

{

title: 'Ajax Tab 1',

autoLoad:{url:'grid.html',scripts:true}

}

所以就使用了Ext论坛中提供的一个Iframe的扩展 Ext.ux.ManagedIFrame

使用时将miframe.js文件导入即可

var tabs2 = new Ext.TabPanel( ...{

// renderTo: document.body,

region : 'center',

el : 'center-center', // 大的

//contentEl : 'center-center', // 小的

activeTab : 0,

width : 600,

height : 250,

plain : true,

defaults : ...{

autoScroll : true

items : [

...{

xtype : "panel",

title : "Personal Assistant",

body : new Ext.ux.ManagedIFrame( ...{

autoCreate : ...{

id:'person', // 设置访问的名称

src : 'dynamic.html',

frameBorder : 0,

cls : 'x-panel-body',

width : '100%',

height : '100%'

}

})

...{

xtype : "panel",

title : "Personal",

body : new Ext.ux.ManagedIFrame( ...{

autoCreate : ...{

id:'person2', // 设置访问的名称

src : 'grid.html',

frameBorder : 0,

cls : 'x-panel-body',

width : '100%',

height : '100%'

}

})

}

]

});

l 树型控件

要给树型控件添加单击事件

tree.on('click', function(node) ...{

// do something

alert(node.id + ' was activated.');

Ext.get('person').dom.src = 'grid.html?selectedid='+node.id;

});

单击后，通过查找ManagedIFrame形成的Tab页的id，并且将其属性src改变来达到Tab页内容改变的效果

Ext.get('person').dom.src = 'grid.html?selectedid='+node.id;

参考：

Ext2_0 form使用实例 - 天晓得的专栏 - CSDNBlog

Ext 2_0布局实例

[2_0][SOLVED] Best practices for getting - saving form data - Ext JS Forums

[EXT Develop Log]--comboBoxradioFix it! - kkbear - JavaEye技术网站

ext学习-tree组件-在线阅读-新书城

对《Ext2_0 form使用实例》的一点补充 - 天晓得的专栏 - CSDNBlog

用Ext 2_0 combobox 做的省份和城市联动选择框 - 天晓得的专栏 - CSDNBlog

关于ext和struts的交互 - Allen_CD_China - JavaEye技术网站

从Java 类产生json(json-lib) - windfree – BlogJava

学习EXT第XX天

流氓临远, 没人性土豆’s ext tutorial

And Others, I can’t remember