我已经得到了我从商店填充一个ExtJS（4.0.7）的GridPanel。 我在GridPanel中的列中显示的值需要具有取决于这就是在该记录的数据的类型的不同视图。
最终的目标是，与备案的“双重”或“整数”值的记录type目前物业的滑块，他们可以调整用户，和一种“串”只是呈现一些只读文本。
我创建了一个自定义列来做到这一点。 它检查的渲染器类型并确定渲染什么。
我已经得到了“串”用下面的代码做工精细，但我怎么能动态地创建和渲染该列中的更复杂的滑块控件挣扎。
这种简化的例子，只是想呈现一个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容器也不能有分机组件儿童的任何配置的方式与其它容器组件可以的一部分。 交栅格渲染逻辑需要分机组件添加到细胞中。
该解决方案修改您的自定义列渲染，使得它把所再现的TD标签的特殊CSS类。 网格视图准备就绪后，记录遍历和自定义类中找到适当的专门栏目。 滑块渲染到发现的每一列。
下面的代码是分机JS网格阵列示例的修改版本在煎茶示例提供。 修改自定义列渲染器和滑块TD元素的后格渲染混合。
这个例子只包括煎茶例子足够的修改，以显示实现的想法。 它缺乏分离视图和控制器逻辑。
这是从修改这里
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
});
}
});
我做了这样的事情，当我需要呈现网格列小图（本质上是一个火花图表）。 该解决方案是类似沙的，但它是更稳健和代表渲染的成分被渲染，而不是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配置选项。 就像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的图表 。 这线程都有我的性能测试结果。 我被渲染168个的图表组件格列在大多数浏览器和操作系统3-4s。 我想，你的滑块将使比快得多。
尝试是这样的：
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);
}
但我必须说，无论你正在试图做的 - 它不健全的权利:)我不认为一堆网格内滑块会好看给用户。
