Found some changed while migrating my product from Extjs 4 5o Extjs 5.1, so thought to share with you all.
Here below is very basic example of GridPanel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Extjs 5.1 Grid Panel</title>
<link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<script>
Ext.onReady(function(){
console.log("I am ready now");
Ext.define('Student',{
extend: 'Ext.data.Model',
fields: ['id','name','mobile']
});
var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]
});
Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
title: 'Student Records',
columns:[
{xtype: 'checkcolumn', text: 'Status', dataIndex:'status', width: 50},
{text: 'Roll Number', dataIndex:'id', width: 100},
{text: 'Name' , dataIndex:'name', width: 100},
{text: 'Mobile' , dataIndex:'mobile', flex: 1}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: studentStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
});
});
</script>
</head>
</html>
Here dockedItems has been used for pagination.
Here below is very basic example of GridPanel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Extjs 5.1 Grid Panel</title>
<link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<script>
Ext.onReady(function(){
console.log("I am ready now");
Ext.define('Student',{
extend: 'Ext.data.Model',
fields: ['id','name','mobile']
});
var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]
});
Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
title: 'Student Records',
columns:[
{xtype: 'checkcolumn', text: 'Status', dataIndex:'status', width: 50},
{text: 'Roll Number', dataIndex:'id', width: 100},
{text: 'Name' , dataIndex:'name', width: 100},
{text: 'Mobile' , dataIndex:'mobile', flex: 1}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: studentStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
});
});
</script>
</head>
</html>
Here dockedItems has been used for pagination.
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)