I need to create a grid on my HTML page. I am able to do that but the whole process made me to include the complete Ext sdk folder in my solution which made my application size considerable. I do not want to make use of everything nor does my application uses MVC architecture. All I want to do is to create a grid component on my page. Currently I am doing like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Usage</title>
<link rel="stylesheet" type="text/css" href="ExtJSIncludes/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script src="ExtJSIncludes/ext.js"></script>
</head>
<body>
<div id="divSampleGrid"></div>
<script>
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
co
lumns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: 'divSampleGrid'
});
});
</script>
</body>
</html>
My 'ExtJSIncludes' folder contains everything. Do I really need that? What are the mimimum files I need to include for just a grid? Is there any standard js file available along with the css that is the only requirement for it? Just like JQuery?
Just include ext-all.js instead of ext.js.
Here is a good read for all possible Ext scripts depending on how you wish to use..Read