Ext.createを使用して動的コンポーネントをExtJS 4 GridPanel列にレンダリングする
ストアから入力するExtJS（4.0.7）GridPanelがあります。 GridPanelの列に表示する値は、レコードにあるデータのタイプに応じて異なるビューを持つ必要があります。
最終的な目標は、レコードのtypeプロパティの値が「double」または「integer」のレコードは、ユーザーが調整できるスライダーを提示し、「string」のタイプは、読み取り専用のテキストをレンダリングするだけです。 。
これを行うためのカスタム列を作成しました。レンダラーでタイプを検査し、何をレンダリングするかを決定します。
以下のコードで「文字列」が正常に機能していますが、列内のより複雑なスライダーコントロールを動的に作成およびレンダリングする方法に苦労しています。
この単純化された例は、日付コントロールを含むPanelをレンダリングしようとしているだけです。それがうまくいくと、残りのスライダーの要素を理解できるようになります。
Ext.define('MyApp.view.MyColumn', {
extend: 'Ext.grid.column.Column',
alias: ['widget.mycolumn'],
stringTemplate: new Ext.XTemplate('code to render {name} for string items'),
constructor: function(cfg){
var me = this;
me.callParent(arguments);
me.renderer = function(value, p, record) {
var data = Ext.apply({}, record.data, record.getAssociatedData());
if (data.type == "string") {
return me.renderStringFilter(data);
} else if (data.type == "double" || data.type == "integer") {
return me.renderNumericFilter(data);
} else {
log("Unknown data.type", data);
};
},
renderStringFilter: function(data) {
// this works great and does what I want
return this.stringTemplate.apply(data);
},
renderNumericFilter: function(data) {
// ***** How do I get a component I "create" to render
// ***** in it's appropriate position in the gridpanel?
// what I really want here is a slider with full behavior
// this is a placeholder for just trying to "create" something to render
var filterPanel = Ext.create('Ext.panel.Panel', {
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'date'
}],
renderTo: Ext.getBody() // this doesn't work
});
return filterPanel.html; // this doesn't work
}
});
私の問題は本当に、どうすればいいですかExt.createコンポーネント、それをgridpanelの列にレンダリングしますか？
これが達成されたと私が見たいくつかの方法があります。グリッド列はExtコンテナーではないため、他のコンテナーコンポーネントと同じように、構成の一部として子としてExtコンポーネントを持つことはできません。 Extコンポーネントをセルに追加するには、ポストグリッドレンダリングロジックが必要です。
このソリューションは、カスタム列のレンダリングを変更して、レンダリングされたTDタグに特別なcssクラスを配置するようにします。グリッドビューの準備ができると、レコードがトラバースされ、カスタムクラスが適切な特別な列。スライダーは、検出された各列にレンダリングされます。
以下のコードは、Senchaの例で提供されているext js配列グリッドの例の修正版です。変更は、カスタム列レンダラーとスライダーのポストグリッドレンダリングでTD要素にミックスします。
この例には、実装のアイデアを示すのに十分なSenchaの例の変更のみが含まれています。個別のビューとコントローラーロジックがありません。
これは here から変更されています
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.data.Model'
]);
Ext.onReady(function() {
// sample static data for the store
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: ['name', 'price', 'change', 'pctChange', 'lastUpdated', 'type']
});
var myData = [
['3m Co', 71.72, 2, 0.03, '9/1/2011', 'integer'],
['Alcoa Inc', 29.01, 4, 1.47, '9/1/2011', 'string'],
['Altria Group Inc', 83.81, 6, 0.34, '9/1/2011', 'string'],
['American Express Company', 52.55, 8, 0.02, '9/1/2011', 'string'],
['American International Group, Inc.', 64.13, 2, 0.49, '9/1/2011', 'integer'],
['AT&T Inc.', 31.61, 4, -1.54, '9/1/2011', 'integer'],
['Boeing Co.', 75.43, 6, 0.71, '9/1/2011', 'string'],
['Caterpillar Inc.', 67.27, 8, 1.39, '9/1/2011', 'integer'],
['Citigroup, Inc.', 49.37, 1, 0.04, '9/1/2011', 'integer'],
['E.I. du Pont de Nemours and Company', 40.48, 3, 1.28, '9/1/2011', 'integer'],
['Exxon Mobil Corp', 68.1, 0, -0.64, '9/1/2011', 'integer'],
['General Electric Company', 34.14, 7, -0.23, '9/1/2011', 'integer']
];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});
// existing template
stringTemplate = new Ext.XTemplate('code to render {name} for string items');
// custom column renderer
specialRender = function(value, metadata, record) {
var data;
data = Ext.apply({}, record.data, record.getAssociatedData());
if (data.type == "string") {
return stringTemplate.apply(data);;
} else if (data.type == "double" || data.type == "integer") {
// add a css selector to the td html class attribute we can use it after grid is ready to render the slider
metadata.tdCls = metadata.tdCls + 'slider-target';
return '';
} else {
return ("Unknown data.type");
}
};
// create the Grid
grid = Ext.create('Ext.grid.Panel', {
rowsWithSliders: {},
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [{
text: 'Company',
flex: 1,
sortable: false,
dataIndex: 'name'
}, {
text: 'Price',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 75,
sortable: true,
dataIndex: 'change',
renderer: specialRender,
width: 200
}, {
text: '% Change',
width: 75,
sortable: true,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastUpdated'
}],
height: 350,
width: 600,
title: 'Irm Grid Example',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
/**
* when the grid view is ready this method will find slider columns and render the slider to them
*/
onGridViewReady = function() {
var recordIdx,
colVal,
colEl;
for (recordIdx = 0; recordIdx < grid.store.getCount(); recordIdx++) {
record = grid.store.getAt(recordIdx);
sliderHolder = Ext.DomQuery.select('.slider-target', grid.view.getNode(recordIdx));
if (sliderHolder.length) {
colEl = sliderHolder[0];
// remove div generated by grid template - alternative is to use a new template in the col
colEl.innerHTML = '';
// get the value to be used in the slider from the record and column
colVal = record.get('change');
// render the slider - pass in the full record in case record data may be needed by change handlers
renderNumericFilter(colEl, colVal, record)
}
}
}
// when the grids view is ready, render sliders to it
grid.on('viewready', onGridViewReady, this);
// modification of existing method but removed from custom column
renderNumericFilter = function(el, val, record) {
var filterPanel = Ext.widget('slider', {
width: 200,
value: val,
record: record,
minValue: 0,
maxValue: 10,
renderTo: el
});
}
});
小さなグラフ（基本的にはsparkグラフ）をグリッド列にレンダリングする必要があるときに、このようなことをしました。このソリューションはshaのソリューションに似ていますが、より堅牢でレンダリングを委任しますColumnではなくレンダリングされているコンポーネントで、実際にはレンダーチェーンがありません。
まず、列クラス：
_Ext.define("MyApp.view.Column", {
extend: "Ext.grid.column.Column",
// ...
renderer: function (value, p, record) {
var container_id = Ext.id(),
container = '<div id="' + container_id + '"></div>';
Ext.create("MyApp.view.Chart", {
type: "column",
// ...
delayedRenderTo: container_id
});
return container;
}
});
_delayedRenderTo configオプションに注意してください。 renderToと同様に、これは、作成時にDOMに存在する必要がないことを除いて、グラフコンポーネントがレンダリングする要素のDOM IDになります。
次にコンポーネントクラス：
_Ext.define("MyApp.view.Chart", {
extend: "Ext.chart.Chart",
// ...
initComponent: function () {
if (this.delayedRenderTo) {
this.delayRender();
}
this.callParent();
},
delayRender: function () {
Ext.TaskManager.start({
scope: this,
interval: 100,
run: function () {
var container = Ext.fly(this.delayedRenderTo);
if (container) {
this.render(container);
return false;
} else {
return true;
}
}
});
}
});
_そのため、initComponent()の実行中に、遅延レンダリングをチェックし、必要に応じてそれを準備します。それ以外の場合は、通常どおりにレンダリングされます。
delayRender()関数自体は、指定されたIDの要素の存在を時々（この場合は100ミリ秒）チェックするようにタスクをスケジュールします。つまり、列がレンダリングされたかどうかをチェックします。そうでない場合は、タスクを再スケジュールするためにtrueを返します。もしそうなら、コンポーネントをレンダリングし、タスクをキャンセルするためにfalseを返します。
フィールドでこれがうまくできたので、うまくいくことを願っています。
ちなみに、これは ExtJSチャートに関する自分の質問 への回答の一部として開発していました。そのスレッドには、私のパフォーマンステストの結果が含まれています。ほとんどのブラウザーとOSで3〜4秒で168のグラフコンポーネントをグリッド列にレンダリングしていました。私はあなたのスライダーがそれよりもずっと速くレンダリングすると思います。
このようなものを試してください：
renderNumericFilter: function () {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('slider', {
renderTo: id,
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100,
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
しかし、私はあなたがやろうとしていることは何でも言う必要があります-それは正しく聞こえません:)私はグリッド内のスライダーの束がユーザーにとって見栄えが良いとは思いません。