ExtJS4 がグリッド列の表示と非表示を制御する checkbox_extjs を自動的に生成する方法

何らかの理由で、グリッド列の表示を制御するチェックボックスグループを作成する必要があります。 EXTJS4 のグリッドパネルには列の表示と非表示を制御できるリストが付属していますが、そのような需要があります（それをすぐに明確にする必要があります）。

次の写真は以下に表示されます



数日前に行った作業に続き、今朝カスタム フィールドを完成させました。上記の通常のクエリまたは高度なクエリが完了した後、列のフィールドと列を取得し、それを処理関数に渡します。この関数は、チェックボックスグループを生成するために使用されます。当初はチェックボックスに check のようなイベントがあると思っていましたが、API を見ると、Change イベントしかないようです。 。

私が書いた makeCustomMadePanel 関数を以下に投稿します。 。グリッドの列に基づいてチェックボックス グループを自動的に生成するために使用されます (グリッド全体のヘッダー コンテンツおよびその他の情報はバックグラウンドから取得されます。どのテーブルがバックグラウンドから送信されるかに関係なく、チェックボックス グループを生成して非表示と非表示を制御できます)列の表示)

パラメーター 再構成中に Gridpanel によって使用されるフィールドと列です。キーは、期間内の var t=grid_a.columnManager.headerCt.items.get(th.itemId); です。 。この文は、grid_a の列情報を取得するために使用されます。 。 APIでは見つからないようです。ネットでいくつかの方法を見つけましたが、どれも適切ではありませんでした。各列にIDを与えたくありません。これは stackoverflow.com/ で見つかりました。 。 http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

コードをコピーします コードは次のとおりです:

function makeCustomMadePanel(fields,cl)
{

var x=cusMadePanel.getComponent ('カスタム' );
//console.log(cusMadePanel.getComponent('custom'));
for(var i=0;i{
x.add(
{
xtype : 'checkboxfield',
boxLabel : cl[i].header,
inputValue : field[i].name,
checked:true,
itemId:i ,
name : 'custom',
listeners : {
change : function(th, value, oldValue,eop) {

var t=grid_a.columnManager.headerCt .items.get (th.itemId);
if(t.isVisible()){

t.setVisible(false);
else{
t.setVisible (true);
}
//grid_a.columns[3].setVisible(false);

}
);


customMadePanel

を指定した後、コードをコピーします

コードは次のとおりです: Ext.define ('customMadePanel', { extend : 'Ext.form.Panel',

title : 'カスタム フィールド',

collapsible : true,
items : [ {
itemId:'custom '、

xtype : 'checkboxgroup'、

fieldLabel : 'フィールドの選択'、
columns : 6、
items : []


}]
//collapsed:true,
});
var cusMadePanel=newcustomMadePanel();


私のアプローチの欠点は次のとおりですこれも明らかですが、makeCustomMadePanel 関数内では、チェックボックス コンポーネントを生成するループに時間がかかりすぎ、38 個のコンポーネントで数秒かかります。 。ユーザーエクスペリエンスは明らかに良くありません。 。

現在、各クエリ後のクエリ結果に基づいて生成されます。 。 。また良い解決策を考えてみます

今日makeCustomMadePanelを最適化したところ、コンポーネントの生成速度が以前に比べて大幅に向上しました！




コードをコピー

コードは次のとおりです。 function makeCustomMadePanel(fields,cl)

cusMade=1;

var x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom')); ;
for(var i=0;i{
//x.add(
var temp=
{
xtype : 'チェックボックスフィールド' 、
boxLabel : cl[i].header、
//inputValue : field[i].name、
checked:true、
itemId:i、
name : 'custom'、
リスナー : {
change : function(th, value, oldValue,eop) {

var t=grid_a.columnManager.headerCt.items.get(th.itemId); /console.log(t.isVisible());
//console.log('break');
if(t.isVisible()){

t.setVisible(false) ;
}
else{
t.setVisible(true);
//console.log(t.isVisible()); columnManager.headerCt .items.get(th.itemId);
//console.log(t1);
//grid_a.columns[3].setVisible(false);

};
//console.log(temp);
}
x.add( fie);


このアイデアは、最初にループ内で生成する必要があるコンポーネント オブジェクトをアセンブルしてから、それらを 1 回追加することです。各追加のコストは非常に高く、速度は非常に速くなります。かなり改善されましたよ〜