Notes

var myFunc = function(){
Ext.create('Ext.data.Store', {
storeId: 'studentList',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'name 1', roll: '1', sub: 'sub 1', email : "email 1" },{ name: 'name 2', roll: '2', sub: 'sub 2', email : "email 2" },
{ name: 'name 3', roll: '3', sub: 'sub 3', email : "email 3" },{ name: 'name 4', roll: '4', sub: 'sub 4', email : "email 4" },
{ name: 'name 5', roll: '5', sub: 'sub 5', email : "email 5" },{ name: 'name 6', roll: '6', sub: 'sub 6', email : "email 6" },
{ name: 'name 7', roll: '7', sub: 'sub 7', email : "email 7" },{ name: 'name 8', roll: '8', sub: 'sub 8', email : "email 8" },
{ name: 'name 9', roll: '9', sub: 'sub 9', email : "email 9" },{ name: 'name 10', roll: '10', sub: 'sub 10', email : "email 10" },
{ name: 'name 11', roll: '11', sub: 'sub 11', email : "email 11" },{ name: 'name 12', roll: '12', sub: 'sub 12', email : "email 12" },
{ name: 'name 13', roll: '13', sub: 'sub 13', email : "email 13" },{ name: 'name 14', roll: '14', sub: 'sub 14', email : "email 14" },
{ name: 'name 15', roll: '15', sub: 'sub 15', email : "email 15" },{ name: 'name 16', roll: '16', sub: 'sub 16', email : "email 16" },
{ name: 'name 17', roll: '17', sub: 'sub 17', email : "email 17" },{ name: 'name 18', roll: '18', sub: 'sub 18', email : "email 18" },
{ name: 'name 19', roll: '19', sub: 'sub 19', email : "email 19" },{ name: 'name 20', roll: '20', sub: 'sub 20', email : "email 20" },
{ name: 'name 21', roll: '21', sub: 'sub 21', email : "email 21" },{ name: 'name 22', roll: '22', sub: 'sub 22', email : "email 22" },
{ name: 'name 23', roll: '23', sub: 'sub 23', email : "email 23" },{ name: 'name 24', roll: '24', sub: 'sub 24', email : "email 24" },
{ name: 'name 25', roll: '25', sub: 'sub 25', email : "email 25" },{ name: 'name 26', roll: '26', sub: 'sub 26', email : "email 27" },
]
});
var myGrid = Ext.create('Ext.grid.Panel', {
title: 'Students Are',
store: Ext.data.StoreManager.lookup('studentList'),
layout: 'fit',
scrollable: true,
tbar: [{ xtype: 'pagingtoolbar', displayInfo: true}],
bbar: [{ xtype: 'pagingtoolbar', displayInfo: true}],
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1},
{ text: 'Roll', dataIndex: 'roll', flex: 1 },
{ text: 'Subject', dataIndex: 'sub', flex: 1},
{ text: 'Email', dataIndex: 'email', flex: 1}
],
bbar: [{ xtype: 'pagingtoolbar', displayInfo: true}],
renderTo: Ext.getBody()
});
var myNextGrid = Ext.create('Ext.grid.Panel', {
title: 'Students Are Not',
store: Ext.data.StoreManager.lookup('studentList'),
layout: 'fit',
scrollable: true,
tbar: [{ xtype: 'pagingtoolbar', displayInfo: true}],
bbar: [{ xtype: 'pagingtoolbar', displayInfo: true}],
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1},
{ text: 'Roll', dataIndex: 'roll', flex: 1 },
{ text: 'Subject', dataIndex: 'sub', flex: 1},
{ text: 'Email', dataIndex: 'email', flex: 1}
],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel',{
//height: 500,
setautofitheight: true,
setautofitwidth: true,
layout: 'column',

items: [{
xtype:'panel',
layout: 'fit',
items:[myGrid],
columnWidth:0.5
},{
xtype:'panel',
layout:'fit',
items: [myNextGrid],
columnWidth:0.5
}],
renderTo: Ext.getBody()
});
}
Ext.onReady(myFunc);