ExtJs - Creating a Grid from records in a database - mysql

Question

I'm using ExtJS 4.2 and I have some records in a MySql database. My question is: How can I create a grid that displays the records in the database?
I tried using ResultSet in a servlet to retrieve the records from the database, but I'm not sure how to proceed from there.
How can i populate the fields in the grid with the records in my database?
I'm new to ExtJS and I'm finding it difficult to come up with a solution for this. Does this have something to do with the store field? If so, how do i go about achieving the above said requirement?

Answer 1

You need to create store, bind to the grid and then load data from server. And sure you need backend for this ExtJS4 do not provide any tools for working with databases
For example( taken from sencha docs ):
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
reader: 'xml'
},
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: '#author.name'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '#total'
}
}
});
// create the grid
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author'},
{text: "Title", width: 180, dataIndex: 'Title'},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup'}
],
renderTo:'example-grid',
width: 540,
height: 200
});
});
The main idea is - models are for defining structure of the record and validation(read about it here), stores - for storing and fetching(by parsing response from server or local defined data) records that match model structure(Basic store) and finally grid handles some events(like "load" or "refresh") and updating rows based on grids column defenition(docs)