search

anandshah123 / ext-auto-grid

Ext auto grid converts any div to ext REST grid backed by spring data REST (known as REST repositories)
GNU General Public License v3.0
0 stars 0 forks source link

readme

ext-auto-grid

The jQuery plugin which will convert your HTML element to fully functional extjs REST grids backed by spring-data-rest

Plugin understands spring-data-rest responses well.
What we have?
<html>
    <div id="extRestGrid"></div>
</html>
Step 1. Include required JS & CSS
<!-- Adding ext all responsive touch css theme -->
<link rel="stylesheet" href="https://github.com/anandshah123/ext-auto-grid/blob/master/ext/css/ext-theme-crisp-touch-all.css">
<!-- Loading ext js core -->
<script src="https://github.com/anandshah123/ext-auto-grid/raw/master/ext/js/ext-all.js"></script>
<!-- take the jquery from google cdn -->
<script src="https://github.com/anandshah123/ext-auto-grid/raw/master/js/jquery.min.js"></script>
<!-- use my plugin -->
<script src="https://github.com/anandshah123/ext-auto-grid/raw/master/ext-auto-grid.js"></script>
Step 2. We know the spring-data-rest JSON response
{
    "_links": {
        "self": {
            "href": "http://localhost:8080/customers?_dc=1408360943681&page=1&start=0&limit=20{&size,sort}"
        }
    },
    "_embedded": {
        "customers": [
            {
                "version": 1,
                "createdDate": 1408249469990,
                "updatedDate": 1408256672987,
                "name": "John doe",
                "village": "New York",
                "contactNumber": "91-9016522121",
                "email": "john.doe@gmail.com",
                "address": "17, wall street, NY",
                "notes": "",
                "image": null,
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/customers/1"
                    }
                }
            }
        ]
    },
    "page": {
        "size": 20,
        "totalElements": 1,
        "totalPages": 1,
        "number": 0
    }
}
Step 3. Use this plugin to convert it to ext js REST grid.
 $("#extRestGrid").extAutoGrid({
        url: 'server/static.json',
        title: 'Customer List',
        width: '100%',
        root: '_embedded.customers',
        fields: ['name', 'address', 'notes', 'village', 'contactNumber', 'email'],
        columns: [
            {text: 'Name',
                dataIndex: 'name',
                width: 300,
                field: {
                    xtype: 'textfield'
                }},
            {text: 'Address',
                dataIndex: 'address',
                field: {
                    xtype: 'textfield'
                }},
            {text: 'Notes',
                dataIndex: 'notes',
                field: {
                    xtype: 'textfield'
                }},
            {text: 'Village',
                dataIndex: 'village',
                field: {
                    xtype: 'textfield'
                }},
            {text: 'Contact Number',
                dataIndex: 'contactNumber',
                width: 400,
                field: {
                    xtype: 'textfield'
                }},
            {text: 'Email',
                dataIndex: 'email',
                field: {
                    xtype: 'textfield'
                }}
        ]
    });
The result

Image of Output