Results 1 to 5 of 5

Thread: i got big problem in using TreePanel

  1. #1

    Default i got big problem in using TreePanel

    well,the TreePanel of extjs is just so convenient,so i choose it to do something,and when i was using it to show a "choose type" window, the problem i can't solve even changed other versions....
    here are some shotcut of the problem:
    under the version of 3.2.0 or higher(lower than 4.x),the situation seems so bad:
    the first time you click the +,it expand and there is so big space between "all-life-long" and "whether out of date" selections
    3.2.0 expanded.png

    and when i click the -, it pull back and just like the picture below:
    3.2.0 unexpanded.png

    when under the ext version of 3.0.2,the situation is rather better than under 3.2.0, the problem just happen when the parent nodes expanded...


    and here is my codes:



    var grouproot= new Ext.tree.AsyncTreeNode({
    children: [{
    id: 'level',
    text: 'user type',
    children: [{
    id: 'allLevel',
    text: 'all',
    leaf: true
    }, {
    id: 'noSupport',
    text: 'no support',
    leaf: true
    }, {
    id: 'month',
    text: 'monthly',
    leaf: true
    }, {
    id: 'year',
    text: 'per year',
    leaf: true
    }, {
    id: 'always',
    text: 'all-life-long',
    leaf: true
    }]
    }, {
    id: 'outOfDate',
    text: 'whether out of date',
    children: [{
    id: 'allOutOfDate',
    text: 'all',
    leaf: true
    }, {
    id: 'notOutOfDate',
    text: 'not yet',
    leaf: true
    }, {
    id: 'alreadyOutOfDate',
    text: 'out of date',
    leaf: true
    }]
    }, {
    id: 'report',
    text: 'chart',
    children: [{
    id: 'levelReport',
    text: 'via user type',
    leaf: true
    }, {
    id: 'outOfDateReport',
    text: 'via if out of date',
    leaf: true
    }]
    }]
    });

    var comboxTree = new Ext.tree.TreePanel({
    id:'comboxTree',
    rootVisible:false,
    lines:true,
    autoScroll:true,
    root: grouproot,width:246,
    height:220,
    //loader: new Ext.tree.TreeLoader({dataUrl:"http://localhost:8080/dcim/itsm_inc/...e=categoryTree"}),
    tbar:[' ',
    new Ext.form.TextField({
    width:180,
    emptyText:'quick search,please type in words',
    enableKeyEvents: true,
    listeners:{
    keyup:function(node, event) {
    findByKeyWordFiler(node, event);
    },
    scope: this
    }
    })
    ]
    })

    //type-choose window
    var category_window = new Ext.Window({
    width:260,
    id:'category_window',
    height:285,
    title:'choose type',
    closeAction:'hide',
    items:[comboxTree,
    {frame:true,html:"<input type='button' value='&nbsp;confirm&nbsp;' onclick='confirm()' style='margin-left:68px'><input type='button' value='&nbsp;cancel&nbsp;' onclick='cancel()' style='margin-left:10px'>"}
    ]
    })










    can somebody help me to solve the problem?? thanks so much!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    Have you tried this using 3.4?

    What is happening in your findByKeyWordFiler function?

    Scott

  3. #3

    Default

    yes,i've tried in v3.4.0 but it still don't work.

  4. #4

    Default

    Quote Originally Posted by scottmartin View Post
    Have you tried this using 3.4?

    What is happening in your findByKeyWordFiler function?

    Scott
    the findByKeyWordFiler function is used to controll the tree to display the node after you type some words which the nodes match them.

  5. #5

    Default

    Quote Originally Posted by scottmartin View Post
    Have you tried this using 3.4?

    What is happening in your findByKeyWordFiler function?

    Scott

    ok,here is the whole codes:

    var grouproot= new Ext.tree.AsyncTreeNode({
    text: 'category', iconCls:'cmp',
    draggable:false,expanded :false,
    id:'13'
    });
    var comboxTree = new Ext.tree.TreePanel({
    id:'comboxTree',animCollapse:false,
    rootVisible:false,
    autoScroll:true,lines:false,
    root: grouproot,width:246,
    height:220,
    loader: new Ext.tree.TreeLoader({dataUrl:"http://localhost:8080/dcim/itsm_inc/...e=categoryTree"}),
    tbar:[' ',
    new Ext.form.TextField({
    width:180,
    emptyText:'quick search,please type some words,
    enableKeyEvents: true,
    listeners:{
    keyup:function(node, event) {
    findByKeyWordFiler(node, event);
    },
    scope: this
    }
    })
    ]
    })

    comboxTree.on('click',function(node){
    navstr = node.text;
    selectCategory = node.id;
    if(node.parentNode != null && node.parentNode != ""){
    bulidnavfullname(node.parentNode)
    Ext.getCmp('category').setValue(navstr);
    }else{
    node.toggle();
    }
    },this,{stopEvent: true});
    comboxTree.on('expandnode',function(node){},this, {stopEvent: true});


    //to show the nodes that match the words you typed
    var timeOutId = null;
    var treeFilter = new Ext.tree.TreeFilter(comboxTree, {
    clearBlank : false,
    autoClear : false
    });
    // save the hidden null nodes
    var hiddenPkgs = [];
    var findByKeyWordFiler = function(node, event) {
    clearTimeout(timeOutId);// clear timeOutId
    comboxTree.expandAll();// expand tree nodes
    timeOutId = setTimeout(function() {
    // to get the words that typed
    var text = node.getValue();
    var re = new RegExp(Ext.escapeRe(text), 'i');
    // show the nodes that hidden before
    Ext.each(hiddenPkgs, function(n) {
    n.ui.show();
    });
    hiddenPkgs = [];
    if (text != "") {
    treeFilter.filterBy(function(n) {
    // only filter the leaf,in order to avoid when parents are filtered,the leaf below can't display
    return !n.isLeaf() || re.test(n.text);
    });
    // if this node is not leaf and there is no leafs below,it should be hid
    comboxTree.root.cascade(function(n) {
    if(n.id!='0'){
    if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){
    hiddenPkgs.push(n);
    n.ui.hide();
    }
    }
    });
    } else {
    treeFilter.clear();
    return;
    }
    }, 300);
    }
    //filter the non-leaf nodes and leaf nodes that don't match the words
    var judge =function(n,re){
    var str=false;
    n.cascade(function(n1){
    if(n1.isLeaf()){
    if(re.test(n1.text)){ str=true;return; }
    } else {
    if(re.test(n1.text)){ str=false;return; }
    }
    });
    return str;
    };
    //tree event
    var navstr = null;

    function bulidnavfullname(node){
    navstr = node.text + "" + navstr;
    if(node.parentNode != null && node.parentNode != undefined)
    {
    bulidnavfullname(node.parentNode);
    }
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •