Ext入门教程教学教材,自适应高度

Ext入门教程教学教材
入门难,精通更难.软件行业中－－ext 是 ExtJs的简称，是一个强大的js类库：
　　ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了,
　　主要包括data,widget,form,gird,dd,menu,其中最强大的应该算gird了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定

义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.
　　主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的

时候.这三个文件必不可少.
　　它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。
　　从 Ext 2开始，商业版(针对那些以盈利为目的的开发方)要收费了。这可能会影响一些他的应用前景。
　　目前的最新版本为2.2，新加入了支持Google Map的组件。

Ext自适应高度:用Ext的时候,人们常会遇到这样的问题,很多组件都不会充满100%,这是因为Ext不接受width:100%,height:100%的参数.在网上找了几在的

资料,没有一点收获.今天自己洗了一把脸回来,想了一个很简单的方法,结果很是容易,很好用.下面举个例子说明我是怎么做到的.
<style>
#Sys_Tree{
        height:100%;
        width:100%;
    }
</style>
var TreeTest = function(){
    return {
        init : function(){
                    var root=new Ext.tree.AsyncTreeNode({
                      id:"root",
                      draggable : true,
                      text:"Root"});
                    var loadert=new Ext.tree.TreeLoader({url:'ActionForm.aspx?Action=GetTree'});
                    
                    var tree=new Ext.tree.TreePanel({
                      id:'Sys_Tree',
                      renderTo:'tree-div',
                      root:root,
                      loader:loadert,
                      autoScroll:true,
                      rootVisible:true,
                      height:Ext.get("tree-div").getHeight(),
                      border:false
                    });

                    tree.on("click",function(node,event){
                        if(node.attributes.link!=undefined&&node.attributes.link!='')
                            Ext.get('main').dom.src = node.attributes.link;
                    }
                    );
                    root.expand(false,false);
        }
            
    };
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
我们在定义组件的时候,记得给它一个id .上面我的treepanel组件,我给他一个 id:'Sys_Tree', 那么我们就可以通过CSS定义这个对象的样式了.
对于高度.我们可以用height:Ext.get("tree-div").getHeight(),来设置.tree-div即为他的父panel的id.这样做是不是么简单呢.哈.

------------------------------------------------------------------------------------------------------------
EXT路径
------------------------------------------------------------------------------------------------------------
var map = new Ext.util.MixedCollection();
var pageContextRequestContextPath='${pageContext.request.contextPath}';
map.add('pageContextRequestContextPath', pageContextRequestContextPath);
------------------------------------------------------------------------------------------------------------
树面板
------------------------------------------------------------------------------------------------------------
var menuTreePanel = function(map){
    //取出集合参数
    var map = map;
    var pageContextRequestContextPath = map.get("pageContextRequestContextPath");
    //设置参数
    var getSysMenus_url = pageContextRequestContextPath + '/sysMenus.bpm?method=getSysMenusToTree';
    //var renderTo = getSysMenus_renderToDiv;
    var treeUrl = getSysMenus_url;
    //设置树形面板
    //定义树的根节点
    var root = new Ext.tree.AsyncTreeNode({
        id: '0',//根节点id
        text: '菜单',
        expanded: false
    });
    //树数据加载
    var data = new Ext.tree.TreeLoader({
        url: treeUrl
    
        //
    });
    
    data.on('beforeload', function(treeLoader, node){
        this.baseParams.id = node.attributes.id;
    }, data);
    //生成树形面板
    var tree = new Ext.tree.TreePanel({
        // renderTo: renderTo,
        root: root,//定位到根节点
        animate: true,//开启动画效果
        enableDD: false,//不允许子节点拖动
        border: false,//没有边框
        rootVisible: true,//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
        loader: data
    });
    return tree;
}

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Ext入门教程教学教材Ext入门教程教学教材 自适应高度自适应高度