ロック機能を使用して extjs 4.1 にグリッドを配置しようとしています。以下のコードを参照してください。
ロックされたフィーチャーで列を定義する場合
var column = {"text":"Company","sortable":true,**locked:true**,"dataIndex":"company","width":350,"filterable":false};
次のエラーを受け取りました
キャッチされていない TypeError: 未定義のプロパティ 'internalId' を読み取ることができません
ここにhtmlコードがあります:
<body>
<div id ="divGrid"></div>
<script src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*']);
Ext.BLANK_IMAGE_URL = 'Images/s.gif';
Ext.onReady(function () {
Ext.Loader.setConfig({ enabled: true });
var data = {
gridData:
[{ "company": "3m Co", "price": 71.72, "change": 0.02, "pctChange": 0.03, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Alcoa Inc", "price": 29.01, "change": 0.42, "pctChange": 1.47, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Altria Group Inc", "price": 83.81, "change": 0.28, "pctChange": 0.34, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "American Express Company", "price": 52.55, "change": 0.01, "pctChange": 0.02, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "American International Group, Inc.", "price": 64.13, "change": 0.31, "pctChange": 0.49, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "AT&T Inc.", "price": 31.61, "change": -0.48, "pctChange": -1.54, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Boeing Co.", "price": 75.43, "change": 0.53, "pctChange": 0.71, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Caterpillar Inc.", "price": 67.27, "change": 0.92, "pctChange": 1.39, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Citigroup, Inc.", "price": 49.37, "change": 0.02, "pctChange": 0.04, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "E.I. du Pont de Nemours and Company", "price": 40.48, "change": 0.51, "pctChange": 1.28, "lastChange": "2012-04-11T21:41:43.105Z"}]
};
var columns = [];
var column =
{"text":"Company","sortable":true,"dataIndex":"company","width":350,"filterable":false,locked:true}
;
columns.push(column);
var fields = [];
fields.push({ name: "company" });
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: fields,
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'gridData'
}
}
});
grid = Ext.create('Ext.grid.Panel', {
store: store,
selModel: Ext.create('Ext.selection.RowModel', { singleSelect: true, selectFirstRow: true }),
columnLines: true,
layout: 'fit',
renderTo:"divGrid",
columns: columns,
loadMask: false,
height: 500,
width: 500,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
viewConfig: {
loadMask: false,
id: "grid",
stripeRows: true
}
});
});
</script>
</body>
</html>