2016-04-27 18 views
0

タブ切り替え時にコンポーネントを再レンダリングする方法はありますか?私は特定のアクセス許可を含むすべてのストアをロードするこのデータを持っています。各タブには、ビューに提供された内容のみが含まれている必要があります。以下の私のスクリーンショットを参照してください。ExtJS 4.2のコンポーネントの更新と再レンダリング

enter image description here

基本的に、これはinitComponent時にロードします。私が現在持っているジレンマは、BackofficeタブがWombatタブとは異なる権限を持っているということです。アイデアは、いずれかに編集許可(sCreate)というアクセス許可が含まれている場合に、そのロールのみが表示されている編集ボタンを表示できることです。したがってBackofficeはsEcommCreate、WombatはsCreateです。どちらかが真であれば、単にinitComponentの間に表示する列に追加/プッシュします。

if (EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)) { 
    aColumns.push({ 
    header: 'Action', 
    xtype: 'actioncolumn', 
    itemId: 'edit-role-btn', 
    width: 100, 
    sortable: false, 
    resizable: false, 
    draggable: false, 
    menuDisabled: true, 
    items: [{ 
     icon: 'resources/img/editpermissions.png', 
     tooltip: 'Edit Permissions', 
     scope: oMe 
    }], 
    editor: { 
     xtype: 'text', 
     name: 'editRow', 
     cls: 'banks-delete-row' 
    } 
    }); 

} 

他のタブのスイッチをオンにしたとき、および読み込み時に、表示をフィルタする方法を教えてください。現在、sCreateまたはsEcommCreateがその条件をパスすると、これはただ1つのstoreなので、両方のロールにボタンを追加するだけです。

はすでに、コントローラからデータストアを再ロードしようとしたが、それは のみそれらを非表示/どちらか 追加/削除/ショーにコンポーネントを再描画データをロードし、そしてません。

より明確にするために、私はそれはそれに割り当てられた権限を作成している場合Action列を削除しない/非表示にする必要があります。

答えて

0

actioncolumnとすべてのアクション列項目には、機能isDisabledがあります。その機能を使用してアイテムを有効/無効にすることをおすすめします。

items: [{ 
    icon: 'resources/img/editpermissions.png', 
    tooltip: 'Edit Permissions', 
    isDisabled:function() { 
     var isWombatTab = (this.up('tabpanel').getActiveTab().text == 'Wombat'); 
     if(isWombatTab) return EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission) 
     else return EcommBackoffice.plugin.Security.getAccess(oMe.sEcommCreatePermission) 
    }, 
    scope: oMe 
}], 

isDisabled()は、グリッドの更新中に処理されますので、あなたが店をリロードするたびに、変更が有効に来る必要があります。ストアを変更せずに強制的にリフレッシュするには、タブのactivateイベントからgrid.refresh()に電話することもできます。

CSSを介して無効になっているアイテムを非表示にすることができます。どのようなことが起こるのか正確には分かりません(使用するテーマなどによっても変わります)。

.x-grid-cell-edit-role-btn .x-item-disabled { 
    visibility:hidden; 
} 
+0

これは試してもうまくいかないようです。 'this.up( 'tabpanel')。getActiveTab()。text'をロギングしようとしました。 'getActiveTab' of null'プロパティを読み取れません。 – ralphcarlo

+0

これはExt.toolbarにも当てはまりますか?私のタブは 'Ext.toolbar.Toolbar'を使って作成されます。 'this.up( 'tabpanel')'は、私がタブを使用していると仮定していると仮定しています。 – ralphcarlo

+0

これは問題を解決していないようです。ボタンは非表示にしますが、列自体は非表示にします。また、タブを切り替えても、そのまま動作します。 – ralphcarlo

関連する問題