Using ExtJs Grid on existing HTML page

78 views Asked by At

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?

1

There are 1 answers

0
Cyril Cherian On BEST ANSWER

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