1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    tesh_ybb is on a distinguished road

      0  

    Default ExtJS4 TreePanelのスクロールバーがselectPathメソッドと連動しない

    ExtJS4 TreePanelのスクロールバーがselectPathメソッドと連動しない


    初めまして。

    ExtJS 2.x 時は、問題なく動作していたロジックなのですが、
    ExtJS4.xに乗せ替えたところ、TreePanelのスクロールバーがselectPathメソッドと連動せず、
    常にスクロールバーが先頭に残ったままとなります。

    そのため、下のほうのnodeをselectPathで選択すると、
    フォーカスが見えなくなってしまいます。



    解決策等ありましたら、ご教示頂ければ幸甚に存じます。


    設定は、以下のようになっています。


    Ext.define('TreeData', {
    extend: 'Ext.data.Model',
    fields: [
    {name:"id"},
    {name:"text"},
    {name:"leaf"},
    {name:"iconCls"},
    {name:"base_cd"},
    {name:"sc_kbn"},
    {name: 'disabled', type:'bool', defaultValue:false}
    ]
    });

    var store = Ext.create('Ext.data.TreeStore', {
    model: 'TreeData',
    proxy: {
    type: 'ajax',
    url: './abcde.php',
    actionMethods: {
    create: 'POST',
    read: 'POST',
    update: 'POST',
    destroy: 'POST'
    }
    },
    root: {
    text: 'Root',
    id: 'rootNode',
    expanded: false
    }
    });

    // ツリーパネルオブジェクト生成
    var treePanelObj = new Ext.tree.Panel({
    renderTo: 'tree',
    id: 'tree',
    animate: true,
    autoScroll: true,
    useArrows: true,
    rootVisible: false,
    border: false,
    width: 2000,
    store: store,
    plugins: [{ptype:'nodedisabled'}]
    });


    // node選択
    treePanelObj.expandPath(data.treePath);
    treePanelObj.selectPath(data.treePath);




    バージョン:ExtJS 4.0.7

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    34
    Vote Rating
    0
    shobuno is on a distinguished road

      0  

    Default


    詳しい状況がわからないので何とも言えませんが、
    サンプルデータ「ext-4.0.7-gpl/examples/tree/reorder.html」を元に
    実験してみましたが、ちゃんと選択されて、スクロールされました。

    修正ファイル:examples/tree/reorder.js
    PHP Code:
    var tree Ext.create('Ext.tree.Panel', {
        
    storestore,
        
    viewConfig: {
            
    plugins: {
                
    ptype'treeviewdragdrop'
            
    }
        },
        
    renderTo'tree-div',
        
    height300,
        
    width250,
        
    title'Files',
        
    useArrowstrue,
        
    dockedItems: [{
            
    xtype'toolbar',
            
    items: [{
                
    text'Expand All',
                
    handler: function(){
                    
    //ここを修正してます。
                    //tree.expandAll();
                    
    tree.selectPath('/Ext JS/app','text',null,function(a,b){console.log(a);console.log(b);});
                }
            }, {
                
    text'Collapse All',
                
    handler: function(){
                    
    tree.collapseAll();
                }
            }]
        }]
    }); 
    このコードの場合、'/Ext JS/app' とパスを指定していますが、
    第2引数で'text'データで検索するように指定している為です。
    (デフォルトのIDだと、IDに'/'が使われているため、第3引数でセパレータを変更するとややこしかった)

    先頭のセパレータ"/"は、必須でした。
    最後のセパレータ"/"は、不要(有ってはダメ)でした。

    また、"app"フォルダが選択されているときに、もう一度"app"を選択処理を行ってもスクロールは動きませんでした。
    その場合は、別の方法でスクロールバーを移動する必要があります。


    というわけで、選択される直前に選択を解除するには下記のようにすればOKのはずです。
    PHP Code:
    tree.getSelectionModel().clearSelections();
    tree.selectPath('/Ext JS/app','text',null,function(a,b){console.log(a);console.log(b);}); 
    いかがでしょう?

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    tesh_ybb is on a distinguished road

      0  

    Default 遅くなりました

    遅くなりました


    返信が遅くなり、誠に申し訳ございません。

    頂いた情報を参考に確認してみましたが、やはり連動してくれません。


    他のマシン等で環境を構築したり、ExtJSを入れなおす等で
    同様の現象が発生するか否か、もう少し状況を整理したい
    と考えております。


    まだ、状況等が整理できていないのですが、
    回答にあまりにも時間を要していしまっているため、
    現状について、ご報告させていただきます。

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    34
    Vote Rating
    0
    shobuno is on a distinguished road

      0  

    Default


    ということは、別のイベントか何かが邪魔してるんじゃないでしょうか…
    全体が解らないので何とも言えません…
    もちろんコンソールにエラーなどは出ていないのですよね?


    取りあえず、提示されているコードを下記のように使用した場合は、動いているようです。
    解決の糸口になれば良いのですが…
    (提示できない部分を直接編集してるから、コピペでは動かないかも…)

    View (ViewPort):
    PHP Code:
    Ext.define('Sample.view.Viewport', {
        
    extend'Ext.container.Viewport',
        
    alias'widget.Sample-viewport',

        
    id'mainView',
        
    layout'auto',
        
    autoScrolltrue,
        
    config: {
            
    buttonSamplenull,
            
    treePanelObjnull
        
    },

        
    initComponent: function() {

            var 
    me this;
            
    console.log(Ext.getClassName(me) + '#initComponent');

            
    me.setButtonSample(Ext.create('Ext.button.Button',{
                
    renderTo'buttonSample',
                
    text'ボタン',
                
    name'sample',
                
    action'sampleButtonAction'
            
    }));

            
    Ext.define('TreeData', {
                
    extend 'Ext.data.Model',
                
    fields : [ {
                    
    name "id"
                
    }, {
                    
    name "text"
                
    }, {
                    
    name "leaf"
                
    }, {
                    
    name "iconCls"
                
    }, {
                    
    name "base_cd"
                
    }, {
                    
    name "sc_kbn"
                
    }, {
                    
    name 'disabled',
                    
    type 'bool',
                    
    defaultValue false
                
    } ]
            });

            var 
    store Ext.create('Ext.data.TreeStore', {
                
    model 'TreeData',
                
    proxy : {
                    
    type 'ajax',
                    
    url './a.json',
                    
    actionMethods : {
                        
    create 'POST',
                        
    read 'POST',
                        
    update 'POST',
                        
    destroy 'POST'
                    
    }
                },
                
    root : {
                    
    text 'Root',
                    
    id 'rootNode',
                    
    expanded false
                
    }
            });

            
    // ツリーパネルオブジェクト生成
            
    var treePanelObj = new Ext.tree.Panel({
                
    renderTo 'tree',
                
    id 'tree',
                
    animate true,
                
    autoScroll true,
                
    useArrows true,
                
    rootVisible false,
                
    border false,
                
    height50,
    //            width: 2000,
                
    store store,
    //            plugins : [ {
    //                ptype : 'nodedisabled'
    //            } ]
            
    });

            
    me.setTreePanelObj(treePanelObj);

            
    // スーパークラスを呼び出す(引数は同じものを渡す)
            
    me.callParent(arguments);
            
    // config の getter・setter を作るのに必須
            
    me.initConfig(arguments);
        },
        
        
    selectNode: function(){
            var 
    me this;
            
    console.log(Ext.getClassName(me) + '#afterInit');
            
    me.getTreePanelObj().getSelectionModel().clearSelections();
            
    me.getTreePanelObj().selectPath('/rootNode/a/c',null,null,function(a,b){console.log(a);console.log(b);});
        },
    }); 
    Control:
    PHP Code:
    Ext.define('Sample.controller.Control', {
        
    extend'Ext.app.Controller',
        
    refs: [
            {
    ref'viewport'selector'Sample-viewport'}
        ],

        
    init: function(app) {
            var 
    me this;
            
    console.log(Ext.getClassName(me) + '#init');

            
    me.control({
                
    'button[action=sampleButtonAction]': {
                    
    clickme.selectNodeAction
                
    }
            });
            
    // スーパークラスを呼び出す(引数は同じものを渡す)
            
    me.callParent(arguments);
        },

        
    selectNodeAction: function(buttonObjecteventeOpts){
            var 
    me this;
            
    console.log(Ext.getClassName(me) + '#selectNodeAction');
            
    me.getViewport().selectNode();
        },
    }); 

    HTML(Formの中に下記2行を適当に配置しただけです):
    PHP Code:
    <div id="buttonSample"></div>
    <
    div id="tree"></div

    JSON(提示が無かったので適当に作りました。):
    PHP Code:
    {id:"rootNode",
    "children": [
        {
            
    id:"a",
            
    text:"a",
            
    leaf:"a",
            
    iconCls:"a",
            
    base_cd:"a",
            
    sc_kbn:"a",
            
    disabled:"false",
            
    children:[{
                
    id:"b",
                
    text:"b",
                
    leaf:"b",
                
    iconCls:"b",
                
    base_cd:"b",
                
    sc_kbn:"b",
                
    disabled:"false"
            
    }, {
                
    id:"c",
                
    text:"c",
                
    leaf:"c",
                
    iconCls:"c",
                
    base_cd:"c",
                
    sc_kbn:"c",
                
    disabled:"false"
            
    }, {
                
    id:"d",
                
    text:"d",
                
    leaf:"d",
                
    iconCls:"d",
                
    base_cd:"d",
                
    sc_kbn:"d",
                
    disabled:"false"
            
    }, {
                
    id:"e",
                
    text:"e",
                
    leaf:"e",
                
    iconCls:"e",
                
    base_cd:"e",
                
    sc_kbn:"e",
                
    disabled:"false"
            
    }, {
                
    id:"f",
                
    text:"f",
                
    leaf:"f",
                
    iconCls:"f",
                
    base_cd:"f",
                
    sc_kbn:"f",
                
    disabled:"false"
            
    }, {
                
    id:"g",
                
    text:"g",
                
    leaf:"g",
                
    iconCls:"g",
                
    base_cd:"g",
                
    sc_kbn:"g",
                
    disabled:"false"
            
    }]
        }
    ]} 

Thread Participants: 1