ana2017
3 Jan 2017, 2:59 PM
Hi,
I am creating a Panel and attaching a grid as an item to the Panel. The store is populated using memory proxy.
The grid is attached to the div element comHistoryGrid.
Here is the fiddle
https://fiddle.sencha.com/#fiddle/1nj2&view/editor
Code
====
Ext.onReady(function(){
Ext.define('comments', {
extend: 'Ext.data.Model',
fields: [
{name: 'COMMENT', type: 'string'},
{name: 'USERNAME', type: 'string'},
{name: 'DATETIME', type: 'date'},
{name: 'ID', type: 'string'}
]
});
var store = new Ext.data.Store({
model: 'comments',
data: [['I am in New York','sam.newyork','12-14-2016 16:44:37','2034'] ],
autoLoad: true,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Comment", width:250, sortable: true, dataIndex: 'COMMENT',align:'left'},
{header: "User Name", width:100, sortable: true, dataIndex : 'USERNAME',align:'left'},
{header: "Comment Date", width:90, sortable: true, dataIndex: 'DATETIME',align:'center'}
],
stripeRows: true,
columnLines : true,
autoExpandColumn: 'COMMENT',
height: 150,
width:'100%',
viewConfig: {
forceFit: true
},
frame:true,
});
var p = new Ext.Panel({
title: 'Comment History',
collapsible:false,
renderTo: 'comHistoryGrid',
autoWidth:true,
items: [grid],
layout: 'fit'
});
store.load({params:{start:0, limit:5}});
});
My Html code
===========
<html>
<head>
</head>
<body>
<div id="comHistoryGrid"></div>
</body>
</html>
What am I doing wrong?
Kindly advice,
Ana
I am creating a Panel and attaching a grid as an item to the Panel. The store is populated using memory proxy.
The grid is attached to the div element comHistoryGrid.
Here is the fiddle
https://fiddle.sencha.com/#fiddle/1nj2&view/editor
Code
====
Ext.onReady(function(){
Ext.define('comments', {
extend: 'Ext.data.Model',
fields: [
{name: 'COMMENT', type: 'string'},
{name: 'USERNAME', type: 'string'},
{name: 'DATETIME', type: 'date'},
{name: 'ID', type: 'string'}
]
});
var store = new Ext.data.Store({
model: 'comments',
data: [['I am in New York','sam.newyork','12-14-2016 16:44:37','2034'] ],
autoLoad: true,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Comment", width:250, sortable: true, dataIndex: 'COMMENT',align:'left'},
{header: "User Name", width:100, sortable: true, dataIndex : 'USERNAME',align:'left'},
{header: "Comment Date", width:90, sortable: true, dataIndex: 'DATETIME',align:'center'}
],
stripeRows: true,
columnLines : true,
autoExpandColumn: 'COMMENT',
height: 150,
width:'100%',
viewConfig: {
forceFit: true
},
frame:true,
});
var p = new Ext.Panel({
title: 'Comment History',
collapsible:false,
renderTo: 'comHistoryGrid',
autoWidth:true,
items: [grid],
layout: 'fit'
});
store.load({params:{start:0, limit:5}});
});
My Html code
===========
<html>
<head>
</head>
<body>
<div id="comHistoryGrid"></div>
</body>
</html>
What am I doing wrong?
Kindly advice,
Ana