カスタムツリーパネルを作成するEXTJS

Question

私はEXTJSを使用しています。変更されたことを示すように設定されているもう1つのアイコンがツリーパネルに追加されます。私はこれらのプロパティをどこで変更できるか不明なので、これを行うのに苦労しています。 HTML単独では簡単ですが、明らかにこのフレームワークは有用であり、これらの変更をその中に統合する必要があります。

おかげで、 ダン

Answer 1

はい、ExtJSフレームワークでレンダリングメソッドを列に処理する方法があります。ここで

は、私はExtJSの6.0.xのを使用してそれを達成する方法を示します。これにより

Ext.create('Ext.container.Viewport', { 
    layout: 'fit', 

    items: [{ 
     xtype: 'container', 
     scrollable: 'y', 
     flex: 1, 

     layout: { 
      type: 'hbox', 
      alignt: 'stretchmax' 
     }, 

     items: [{ 
      xtype: 'treepanel', 
      rootVisible: false, 
      flex: 1, 

      store: { 
       type: 'tree', 
       parentIdProperty: 'parentId', 

       root: { 
        text: 'Navigation Bar', 
        expanded: true, 
        children: [{ 
         text: 'Parts', 
         children: [{ 
          leaf: true, 
          itemId: 'addPart', 
          text: 'Add new part', 
          changed: true 
         }, { 
          leaf: true, 
          itemId: 'manageParts', 
          text: 'Manage Parts', 
          changed: false 
         }, ] 
        }, { 
         leaf: true, 
         itemId: 'announcements', 
         text: 'Announcements', 
         changed: true 
        }] 
       } 
      }, 

      columns: [{ 
       text: 'Code', 
       dataIndex: 'codigo', 
       align: 'left' 
      }, { 
       xtype: 'treecolumn', 
       text: 'Description', 
       dataIndex: 'text', 
       flex: 1 
      }, { 
       text: 'Edited', 
       iconCls: 'x-fa fa-edit', 
       align: 'center', 
       flex: 1, 
       renderer: function (f, grid, record) { 
        if(record.get('changed') === true) { 
         return "Changed Icon here" 
        } 
        else { 
         return "Not changed icon here"; 
        } 
       } 
      }] 
     }] 
    }] 
}); 

あなたは簡単に店でデータを管理することができ、簡単にストア内のデータを更新することができます。 ExtJSは指定された構成を列に描画します。

actioncolumnを使用して、アイコン/ボタンを表示し、リスナーでイベントを処理することもできます。

例フィドル：あなたの応答のためのhttps://fiddle.sencha.com/#view/editor&fiddle/28qm

Answer 2

私は問題を解決しました。ストアのテキストフィールドにhtmlを埋め込むことができます。

Ext.define('MyApp.store.Navigation', { 
extend: 'Ext.data.TreeStore', 
alias: 'store.navigation', 

rootData: { 
    text: 'Navigation Bar', 
    expanded: true, 
    children: [ 
     { 
      text: 'Parts', 
      children: [ 
       { leaf:true, itemId:'addPart', text: 'Add new part' }, 
     { leaf:true, itemId:'manageParts', text: 'Manage Parts <b>here</b>' }, 
      ] 
     }, 
    { 
      leaf:true, itemId:'announcements', text: 'Announcements' 
     } 
    ] 
}, 

constructor: function (config) { 
    // Since records claim the data object given to them, clone the data 
    // for each instance. 
    config = Ext.apply({ 
     root: Ext.clone(this.rootData) 
    }, config); 

    this.callParent([config]); 
} 

}）;

おそらく貧弱な解決策ですが、仕事は終わります。