1. #1
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    54
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Post ExtJS and Spring MVC Framework: CRUD DataGrid Example

    ExtJS and Spring MVC Framework: CRUD DataGrid Example


    Hi,

    I've been writing some examples how to integrate ExtJS and Spring Framework and I decided to share my latest one:

    http://loianegroner.com/2010/03/extjs-and-spring-mvc-framework-crud-datagrid-example/

    Hope this will help someone!

    Cheers from Brazil!

  2. #2
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    484
    Vote Rating
    15
    wemerson.januario will become famous soon enough

      1  

    Default Nice

    Nice


    Very nice Loiane.
    É noissss. Brasil sil sil sil sil sil sil

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    ramarajuv is on a distinguished road

      0  

    Default


    I really need a working example of Ext JS Grid Panel CRUD with a Spring/Grails backend. I am not able to see any content on the link you posted. It shows an error. Could you please help me with the code which I can refer?

  4. #4
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    54
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      1  

    Default


    Quote Originally Posted by ramarajuv View Post
    I really need a working example of Ext JS Grid Panel CRUD with a Spring/Grails backend. I am not able to see any content on the link you posted. It shows an error. Could you please help me with the code which I can refer?
    https://github.com/loiane/extjs-crud-grid

    There are other examples with Spring and Ext JS 4 in my github as well.
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    10
    Vote Rating
    0
    ramarajuv is on a distinguished road

      0  

    Default


    Thank You for sharing your code. I found your post here too http://java.dzone.com/articles/extjs-spring-mvc-3-and

    I
    t was of great help. Thanks a ton.

  6. #6
    Sencha User
    Join Date
    Dec 2012
    Location
    Finland
    Posts
    16
    Vote Rating
    0
    sinaalizadeh is on a distinguished road

      0  

    Default changing application architecture

    changing application architecture


    Hi loiane
    thanks for your sample code, I want to change the architecture of your code to model, store, view and controller. How can I do this? How can I address a model which is located in a separate file named Contact.js ?

  7. #7
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    54
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Hi, pls check this example - it uses MVC: https://github.com/loiane/ext4-crud-mvc
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  8. #8
    Sencha User
    Join Date
    Mar 2015
    Posts
    1
    Vote Rating
    0
    Samir25769 is on a distinguished road

      0  

    Default Spring MVC + Extjs DataGrid refresh/reload problem on click of button

    Spring MVC + Extjs DataGrid refresh/reload problem on click of button


    Hi Loiane,
    I am using your code to refresh/reload the data grid on click of a search button by using Spring MVC.
    I can load the grid from database on click of search button on first time only.

    Issue is : Instead of reloading the same grid on click of search button every time , it is re creating multiple instances of grid one after the other vertically.

    My JSP code and JS code is as below. Can you please let me know where I am doing the mistake and what must I do to fix it.

    Thanks in advance.

    JSP Code (test.jsp) :
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

    <!-- EXT JS CSS -->
    <link href="/resources/css/ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="/resources/css/ext-3.2.1/examples/ux/css/rowEditorCustom.css" rel="stylesheet" type="text/css" />
    <link href="/resources/css/ext-3.2.1/examples/shared/examples.css" rel="stylesheet" type="text/css" />
    <link href="/resources/css/ext-3.2.1/examples/ux/css/RowEditor.css" rel="stylesheet" type="text/css" />

    <!-- App custom css -->
    <link href="/resources/css/crudgrid.css" rel="stylesheet" type="text/css" />


    <!-- ExtJS js -->
    <script src="<c:url value="/resources/js/ext-3.2.1/adapter/ext/ext-base.js" />"></script>
    <script src="<c:url value="/resources/js/ext-3.2.1/ext-all.js" />"></script>
    <!-- Row Editor plugin js -->
    <script src="<c:url value="/resources/js/ext-3.2.1/examples/ux/RowEditor.js" />"></script>

    <!-- App js -->

    <script src="<c:url value="/resources/js/crud-grid.js" />"></script>

    <script src="<c:url value="/resources/js/jquery-1.11.2.js" />"></script>

    </head>
    <body>
    <h1> Grid Page </h1>
    <form:form id="teacherReportForm" method="post" action="searchStudents.html">
    <table style=" width: 50%">
    <tr>
    <td> Search: </td>
    <td><input type="button" id="searchBtn" value="Show Report" onclick="showReport();"/> </td>
    </tr>
    </table>


    <div id="crud-grid" ></div>


    </form:form>
    </body>
    </html>

    JS Code (crud-grid.js):

    //Ext.onReady(function(){
    function searchStudents(){


    var Contact = Ext.data.Record.create([
    {name: 'id'},
    {
    name: 'name',
    type: 'string'
    }, {
    name: 'phone',
    type: 'string'
    }, {
    name: 'email',
    type: 'string'
    }]);

    var proxy = new Ext.data.HttpProxy({
    api: {
    read : 'viewDataGrid.html',
    create : 'contact/create.action',
    update: 'contact/update.action',
    destroy: 'contact/delete.action'
    }
    });

    var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data',
    messageProperty: 'message' // <-- New "messageProperty" meta-data
    },
    Contact);


    // The new DataWriter component.
    var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: true
    });

    // Typical Store collecting the Proxy, Reader and Writer together.
    var store = new Ext.data.Store({
    id: 'user',
    proxy: proxy,
    reader: reader,
    writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
    autoSave: false,
    autoLoad:true// <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
    });


    //read the data from simple array

    // store.load();

    Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
    Ext.Msg.show({
    title: 'ERROR',
    msg: res.message,
    icon: Ext.MessageBox.ERROR,
    buttons: Ext.Msg.OK
    });
    });
    var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Update'
    });
    // create grid
    var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
    {header: "NAME",
    width: 170,
    sortable: true,
    dataIndex: 'name',
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }},
    {header: "PHONE #",
    width: 160,
    sortable: true,
    dataIndex: 'phone',
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }},
    {header: "EMAIL",
    width: 170,
    sortable: true,
    dataIndex: 'email',
    editor: {
    xtype: 'textfield',
    allowBlank: false
    }}
    ],
    viewConfig:{forcefit:true},
    plugins: [editor],
    title: 'My Contacts',
    height: 300,
    width:535,
    frame:true,
    tbar: [{
    iconCls: 'icon-user-add',
    text: 'Add Contact',
    handler: function(){
    var e = new Contact({
    name: 'New Guy',
    phone: '(000) 000-0000',
    email: 'new@loianetest.com'
    });
    editor.stopEditing();
    store.insert(0, e);
    grid.getView().refresh();
    grid.getSelectionModel().selectRow(0);
    editor.startEditing(0);
    }
    },{
    iconCls: 'icon-user-delete',
    text: 'Remove Contact',
    handler: function(){
    editor.stopEditing();
    var s = grid.getSelectionModel().getSelections();
    for(var i = 0, r; r = s[i]; i++){
    store.remove(r);
    }
    }
    },{
    iconCls: 'icon-user-save',
    text: 'Save All Modifications',
    handler: function(){
    store.save();
    }
    }]
    });
    //store.load(); // Tried it but not working
    // grid.getStore().load(); // Tried it but not working
    //grid.getStore().loadData(store); // Tried it but not working


    grid.render('crud-grid');


    //grid.getStore().reload(); // Tried it but not working
    //grid.getView().refresh(); // Tried it but not working
    }