您的位置: 首页  >  文章  >  Think of Ext2.0 (3)

Think of Ext2.0 (3)

分类: 文章 • 2024-10-28 18:24:47

5.         Tree

Think of Ext2.0 (3)

直接使用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使用如下，相对比较简单

Think of Ext2.0 (3)    var Tree = Ext.tree;
Think of Ext2.0 (3)    
Think of Ext2.0 (3)Think of Ext2.0 (3)    var tree = new Tree.TreePanel(...{
Think of Ext2.0 (3)        el:'tree-div',
Think of Ext2.0 (3)        autoScroll:true,
Think of Ext2.0 (3)        animate:true,
Think of Ext2.0 (3)        enableDD:true,
Think of Ext2.0 (3)        containerScroll: true, 
Think of Ext2.0 (3)Think of Ext2.0 (3)        loader: new Tree.TreeLoader(...{
Think of Ext2.0 (3)            dataUrl:'record.jsp'
Think of Ext2.0 (3)        })
Think of Ext2.0 (3)    });
Think of Ext2.0 (3)
Think of Ext2.0 (3)    // set the root node
Think of Ext2.0 (3)Think of Ext2.0 (3)    var root = new Tree.AsyncTreeNode(...{
Think of Ext2.0 (3)        text: 'Ext JS',
Think of Ext2.0 (3)        draggable:false,
Think of Ext2.0 (3)        id:'source'
Think of Ext2.0 (3)    });
Think of Ext2.0 (3)    tree.setRootNode(root);
Think of Ext2.0 (3)
Think of Ext2.0 (3)    // render the tree
Think of Ext2.0 (3)    tree.render();
Think of Ext2.0 (3)    root.expand();
Think of Ext2.0 (3)

 


6.         Layout

Think of Ext2.0 (3)

左边为树型控件，右边为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文件导入即可

Think of Ext2.0 (3)Think of Ext2.0 (3)var tabs2 = new Ext.TabPanel( ...{
Think of Ext2.0 (3)            // renderTo: document.body,
Think of Ext2.0 (3)            region : 'center',
Think of Ext2.0 (3)            el : 'center-center', // 大的
Think of Ext2.0 (3)            //contentEl : 'center-center',  // 小的
Think of Ext2.0 (3)            activeTab : 0,
Think of Ext2.0 (3)            width : 600,
Think of Ext2.0 (3)            height : 250,
Think of Ext2.0 (3)            plain : true,
Think of Ext2.0 (3)Think of Ext2.0 (3)            defaults : ...{
Think of Ext2.0 (3)                autoScroll : true
Think of Ext2.0 (3)            },
Think of Ext2.0 (3)            items : [
Think of Ext2.0 (3)        
Think of Ext2.0 (3)Think of Ext2.0 (3)            ...{
Think of Ext2.0 (3)                xtype : "panel",
Think of Ext2.0 (3)                title : "Personal Assistant",                
Think of Ext2.0 (3)Think of Ext2.0 (3)                body : new Ext.ux.ManagedIFrame( ...{
Think of Ext2.0 (3)Think of Ext2.0 (3)                    autoCreate : ...{
Think of Ext2.0 (3)                        id:'person', // 设置访问的名称
Think of Ext2.0 (3)                        src : 'dynamic.html',                        
Think of Ext2.0 (3)                        frameBorder : 0,
Think of Ext2.0 (3)                        cls : 'x-panel-body',
Think of Ext2.0 (3)                        width : '100%',
Think of Ext2.0 (3)                        height : '100%'
Think of Ext2.0 (3)                    }
Think of Ext2.0 (3)                })
Think of Ext2.0 (3)            },
Think of Ext2.0 (3)Think of Ext2.0 (3)            ...{
Think of Ext2.0 (3)                xtype : "panel",
Think of Ext2.0 (3)                title : "Personal",                
Think of Ext2.0 (3)Think of Ext2.0 (3)                body : new Ext.ux.ManagedIFrame( ...{
Think of Ext2.0 (3)Think of Ext2.0 (3)                    autoCreate : ...{
Think of Ext2.0 (3)                        id:'person2', // 设置访问的名称
Think of Ext2.0 (3)                        src : 'grid.html',                        
Think of Ext2.0 (3)                        frameBorder : 0,
Think of Ext2.0 (3)                        cls : 'x-panel-body',
Think of Ext2.0 (3)                        width : '100%',
Think of Ext2.0 (3)                        height : '100%'
Think of Ext2.0 (3)                    }
Think of Ext2.0 (3)                })
Think of Ext2.0 (3)            }
Think of Ext2.0 (3)            ]
Think of Ext2.0 (3)        });
Think of Ext2.0 (3)

l         树型控件

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

Think of Ext2.0 (3)Think of Ext2.0 (3)tree.on('click', function(node) ...{
Think of Ext2.0 (3)            // do something
Think of Ext2.0 (3)                alert(node.id + ' was activated.');
Think of Ext2.0 (3)                Ext.get('person').dom.src = 'grid.html?selectedid='+node.id;
Think of Ext2.0 (3)            });
Think of Ext2.0 (3)

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

Think of Ext2.0 (3)Ext.get('person').dom.src = 'grid.html?selectedid='+node.id;

参考：

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

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使用实例》的一点补充 - 天晓得的专栏 - ****Blog

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

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

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

学习EXT第XX天

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

And Others, I can’t remember

相关推荐