Results 1 to 2 of 2

Thread: JAVA <==> ExtJS communication with an EditorGridPanel

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    4

    Default JAVA <==> ExtJS communication with an EditorGridPanel

    Hello,

    I am creating a web application based on struts2 and extJS

    The JSP with extJS must display data from a database in an editable grid.
    After modifications in the grid, the JSP must return the content of the the grid to the server.

    In the first part, no problem, in extJS I declared a proxy which call an action wich return JSON datas.
    Theses JSON datas are used to build the grid.

    I use the EditorGridPanel to make my editable grid and put a button at the end to submit the changes.
    Here comes my problem...

    I don't know how to code the button.
    It must:
    ==> constuct JSON datas to send to se server
    ==> Send these datas to the server

    Can somebody help me ?

    Here is my js file:

    Code:
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        
        // shorthand alias
        var fm = Ext.form;
    
        // the column model has information about grid columns
        // dataIndex maps the column to the specific data field in
        // the data store (created below)
    
        var cm = new Ext.grid.ColumnModel({
            // specify any defaults for each column
            defaults: {
                sortable: true,
                menuDisabled: true
                },
            columns: [{
                id: 'DateOuverture',
                header: "Date d\'ouverture",
                dataIndex: 'DateOuverture',
                width: 120,
                renderer: Ext.util.Format.dateRenderer('d-m-Y'),
                editor: new fm.DateField({
                    format: 'd-m-Y',
                    allowBlank: false, blankText:'Ce champ est obligatoire'})
            },{
                id: 'HeureOuverture',
                header: "Heure d\'ouverture",
                dataIndex: 'HeureOuverture',
                width: 120,
                editor: new fm.TimeField({
                    format: 'H:i',
                    allowBlank: false, blankText:'Ce champ est obligatoire'})
            },{
                id: 'HeureFermeture',
                header: "Heure de fermeture",
                dataIndex: 'HeureFermeture',
                width: 120,
                editor: new fm.TimeField({
                    format: 'H:i',
                    allowBlank: false, blankText:'Ce champ est obligatoire'})
            },{
                id: 'Commentaire',
                header: "Commentaire",
                dataIndex: 'Commentaire',
                width: 400,
                editor: new fm.TextField()
    
            }]
        });
    
        var proxy=new Ext.data.HttpProxy(    {url:'readDataCalendrierTP.do'});
        var reader=new Ext.data.JsonReader(
                {
                },[
                       {name: "DateOuverture", type: 'date', dateFormat: 'Y-m-d'},
                       {name: "HeureOuverture"}, //, type: 'date', dateFormat: 'H:i'},
                       {name: "HeureFermeture"}, //, type: 'date', dateFormat: 'H:i'},
                       {name: "Commentaire"}
                       ]
                )
        
          var store=new Ext.data.Store(    {
                  proxy:proxy,
                  reader:reader,
                  sortInfo: {field:'DateOuverture', direction:'ASC'}
          });
    
          store.load();
    
        // create the editor grid
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 'grid-calendrierTP',
            width: 800,
            height: 300,
            enableColumnMove: false,                      // turn off column reorder drag drop
            enableColumnResize: false,                  // turn off column resize for whole grid
            autoExpandColumn: 'Commentaire',             // column with this id will be expanded
    //        title: 'Calendrier des ouvertures TP',
    //        frame: true,                                // ???
            clicksToEdit: 2,
            tbar: [{
                text: 'Ajouter une donn&eacute;e',
                handler : function(){
                    // access the Record constructor through the grid's store
                    var CalTP = grid.getStore().recordType;
                    var p = new CalTP({
                        DateOuverture: '',
                        HeureOuverture: '',
                        HeureFermeture: '',
                        Commentaire: ''
                    });
                    grid.stopEditing();
                    store.insert(0, p);
                    grid.startEditing(0, 0);
                }
            }],
            buttons: [{
                text: 'Update',
                handler: function() {
                    alert("Here is the missing code...");
                }
            }]
    
        });
    });
    The submit button is at the bottom

    I don't know how to do that... please help

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    4

    Default

    Ok... with the following code I create json datas:
    Code:
            buttons: [{
                text: 'Mettre &agrave; jour',
                handler: function() {
                    var updated_data = new Array();
                    ds = grid.store;
                    var recordCount =ds.getTotalCount();
                    rows = ds.getRange(0,recordCount);
                    for (x=0; x < recordCount; x++)
                    {
                        updated_data[x] = rows[x].data;
                    }
                    json_data = Ext.encode(updated_data);
                    alert(json_data);
                }
    But still one question: How to call the server page ?

Similar Threads

  1. ExtJS 2.1 and Java Demo - ExtJS Ajax Communication Best Practices
    By ExtJsAndJava in forum Community Discussion
    Replies: 36
    Last Post: 6 Oct 2012, 2:00 PM
  2. Extjs Data Grid, Java Action communication
    By Esakki Sundar in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 13 Mar 2009, 10:25 AM
  3. EXT GWT: Supported communication methods with a non-java server
    By siva.sajja in forum Community Discussion
    Replies: 1
    Last Post: 25 Feb 2009, 5:25 AM
  4. EXT GWT: Supported communication methods with a non-java server
    By siva.sajja in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 23 Feb 2009, 3:01 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •