2011-01-25 7 views
4

私はExtJS TreeGridを持っており、カスタムレンダラーを特定の列に追加しようとしています。残念ながら、それは動作していません - イベントは解雇されておらず、警告は表示されません。 TreeGridのAPIも見つかりませんでした。他の誰かがこれを経験しましたか?ExtJS - TreeGridのカスタム列レンダラーが起動されていません

var tree = new Ext.ux.tree.TreeGrid({ 
     title: 'My Tree Grid', 
     loader: treeLoader, 
     columns:[{ 
      header: 'Title', 
      dataIndex: 'title', 
      width: 500 
     },{ 
      header: 'Testing', 
      width: 100, 
      dataIndex: 'testing', 
      renderer: function(value) { 
       console.log('Test'); 
      }, 
      align: 'center' 
     }] 
    }); 

ありがとう:

は、ここでは、コードです!

答えて

5

ユーザー拡張(Ext.ux)であるため、TreeGridのAPIはありません。詳細については、ソースコードを参照する必要があります。

http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

と「ソースの表示」Ctrl + Uを打つ:あなたのプロジェクト内のソースを持っていない場合は、次のページに進みます。そこからTreeGrid.jsとその他のサポートするjsファイルにリンクすることができます。

TreeGridは、TreePanelを拡張しています。これは、普通の古いPanelにも及んでいます。 GridPanelへの参照がないようですので、そのコンポーネントを使用していた場合に期待していたカラムレンダラーはないと思います。私が集まる何から、例えば(木grid.js)の代わりに、列のデータをレンダリングするためのXTemplateを使用しています。

var tree = new Ext.ux.tree.TreeGrid({ 
     title: 'Core Team Projects', 
     width: 500, 
     height: 300, 
     renderTo: Ext.getBody(), 
     enableDD: true, 

     columns:[{ 
      header: 'Task', 
      dataIndex: 'task', 
      width: 230 
     },{ 
      header: 'Duration', 
      width: 100, 
      dataIndex: 'duration', 
      align: 'center', 
      sortType: 'asFloat', 
      // ================================== // 
      // this acts as your column renderer 
      tpl: new Ext.XTemplate('{duration:this.formatHours}', { 
       formatHours: function(v) { 
        if(v < 1) { 
         return Math.round(v * 60) + ' mins'; 
        } else if (Math.floor(v) !== v) { 
         var min = v - Math.floor(v); 
         return Math.floor(v) + 'h ' + Math.round(min * 60) 
          + 'm'; 
        } else { 
         return v + ' hour' + (v === 1 ? '' : 's'); 
        } 
       } 
      }) 
      // ================================== // 
     },{ 
      header: 'Assigned To', 
      width: 150, 
      dataIndex: 'user' 
     }], 

     dataUrl: 'treegrid-data.json' 
    }); 

あなたの目的のためのXTemplateを使用してみてください。これがあなたのニーズを満たしていない場合は、より多くの情報を提供する必要があります。

+0

多くのありがとうMcStretch、XTemplateはうまく仕事をします。深く掘り下げてくれてありがとう。私はユーザー拡張で作業していたことを認識していませんでした。 –

+0

問題ありません。名前空間の間に挟まれた "ux"を見るのは難しいですし、それでも "ユーザー拡張"を意味することは明白ではありません。 – McStretch

関連する問題