[Catalyst] Jason Kohles' tutorial on ExtJs editable data grids and Catalyst

Ian Docherty catalyst at iandocherty.com
Fri Apr 17 06:57:06 GMT 2009


jagdish eashwar wrote:
> Hi,
> No I don't get any javascript error in the error log when I hit  
> 'save', and it doesn't save the changes in the database either. Just 
> nothing happens.
This might be obvious to you in which case I apologise, javascript 
errors do not appear in the (server) error log file. You need to check 
for errors client side.

Are you using something like Firefox and FireBug to test your javascript 
on your browser?

Regards
Ian
>
> On Thu, Apr 16, 2009 at 9:34 PM, W. Tyler Gee <geekout at gmail.com 
> <mailto:geekout at gmail.com>> wrote:
>
>     Is there a javascript error when you hit save or is it getting to
>     the server? Where is your actual problem?
>
>
>     On Thu, Apr 16, 2009 at 5:30 AM, jagdish eashwar
>     <jagdish.eashwar at gmail.com <mailto:jagdish.eashwar at gmail.com>> wrote:
>
>         Hi Peter,
>         Thanks for writing in. It is really not my code at all. I have
>         taken it all from the tutorial. I thought that people will get
>         a better perspective if I referred them to the tutorial.
>         Nevertheless, I am pasting code from the advent.js file below.
>         ( I have made a few inconsequential changes though, like the
>         values in the drop down etc.)
>
>         /*
>          * advent.js
>          */
>
>         Ext.onReady(function() {
>
>          var col_model = new Ext.grid.ColumnModel([
>                 {
>                     id:         'id',
>                     header:     'ID',
>                     dataIndex:  'id',
>                     width:      40
>                 },
>                 {
>                     id:         'name',
>                     header:     'Name',
>                     dataIndex:  'name',
>                 editor:     new Ext.form.TextField({
>                         allowBlank:     false,
>             })
>                 },
>                 {
>                     id:         'occupation',
>                     header:     'Occupation',
>                     dataIndex:  'occupation',
>                     width:      70,
>                     editor:     new Ext.form.ComboBox({
>                         typeAhead:      true,
>                         triggerAction:  'all',
>                         transform:      'occpopup',
>                         lazyRender:     true,
>                         listClass:      'x-combo-list-small'
>                     })
>                 }
>             ]);
>
>             col_model.defaultSortable = true;
>
>
>             var People = Ext.data.Record.create([
>                 { name:    'id',        type: 'int'},
>                 { name: 'name',        type: 'string'},
>                 { name: 'occupation',    type: 'string'}
>             ]);
>
>
>             var store = new Ext.data.JsonStore({
>                 url: gridurl,
>                 root: 'people',
>                 fields: People
>             });
>
>         var grid = new Ext.grid.EditorGridPanel({
>                 store:              store,
>                 cm:                 col_model,
>                 title:              'Edit Persons',
>                 width:              600,
>                 height:             300,
>                 frame:              true,
>                 autoExpandColumn:   'name',
>                 renderTo:           'datagrid',
>                 tbar:               [
>                     {              
>                         text:           'New Person',
>                         handler:        function() {
>                             var p = new People({
>                                 name:           'Unnamed New Person',
>                                 occupation:    'Unknown',
>                             });
>                             grid.stopEditing();
>                             store.insert( 0, p );
>                             grid.startEditing( 0, 1 );
>                         },
>                     },
>                     {
>                         text:           'Save Changes',
>                         handler:        function() {
>                             grid.stopEditing();
>                             var changes = new Array();
>                             var dirty = store.getModifiedRecords();
>                             for ( var i = 0 ; i < dirty.length ; i++ ) {
>                                 var id = dirty[i].get( 'id' );
>                                 var fields = dirty[i].getChanges();
>                                 fields.id <http://fields.id> =
>         dirty[i].get( 'id' );
>                                 changes.push( fields );
>                             }
>                             console.log( changes );
>                             submitChanges( changes );
>                             store.commitChanges();
>                         },
>                     },
>                     {
>                         text:           'Discard Changes',
>                         handler:        function() {
>                             grid.stopEditing();
>                             store.rejectChanges();
>                         },
>                     }
>                 ]
>             });
>
>
>             store.load();
>
>         function submitChanges( data ) {
>                 Ext.Ajax.request({
>                     url:        posturl,
>                     success:    function() { store.reload() },
>                     params:     { changes: Ext.util.JSON.encode( data ) }
>                 });
>             }
>         });
>
>         gridurl and posturl are defined in index.tt2 pasted below. It
>         also contains a link to advent.js.
>
>         [% META title = 'Advent AJAX Grid' %]
>         <script type = "text/javascript">
>             var posturl = '[% Catalyst.uri_for("/people_data_submit") %]';
>             var gridurl = '[% Catalyst.uri_for("/people_data") %]';
>         </script>
>         [% js_link (src = '/static/advent.js') %]
>         <div id = "datagrid"></div>
>         <select id="occpopup" style="display: none">
>         <option value="SBI">SBI</option>
>         <option value="IBS">IBS</option>
>         <option value="ICICI">ICICI</option>
>         <option value="SELF">SELF</option>
>         </select>
>
>
>
>
>
>         On Thu, Apr 16, 2009 at 7:41 PM, Peter Karman
>         <peter at peknet.com <mailto:peter at peknet.com>> wrote:
>
>             jagdish eashwar wrote on 04/16/2009 05:55 AM:
>             > Hi,
>             >
>             > I have been able to work through all of Jason Kohles'
>             tutorial except the
>             > part about saving changes back in the database.  The
>             'New Person' and
>             > 'Discard Changes' in the tool bar are working, but the
>             'Save Changes' is
>             > not. I have checked several times for any typing
>             mistakes that I might have
>             > committed, but that part of the code is not working for
>             me.  I wonder if the
>             > argument ('data') in the submitChanges function is to be
>             substituted with
>             > something more explicit by the reader. I will be glad to
>             receive some help
>             > and guidance.
>             >
>             > I forgot to mention in my earlier post that the tutorial
>             is available at
>             > http://www.catalystframework.org/calendar/2007/9.
>
>             Tip: you won't get any useful help until you show us your
>             code.
>
>
>             --
>             Peter Karman  .  peter at peknet.com
>             <mailto:peter at peknet.com>  .  http://peknet.com/
>
>
>             _______________________________________________
>             List: Catalyst at lists.scsys.co.uk
>             <mailto:Catalyst at lists.scsys.co.uk>
>             Listinfo:
>             http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>             Searchable archive:
>             http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
>             Dev site: http://dev.catalyst.perl.org/
>
>
>
>         _______________________________________________
>         List: Catalyst at lists.scsys.co.uk
>         <mailto:Catalyst at lists.scsys.co.uk>
>         Listinfo:
>         http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>         Searchable archive:
>         http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
>         Dev site: http://dev.catalyst.perl.org/
>
>
>
>         ~Tyler
>
>
>     _______________________________________________
>     List: Catalyst at lists.scsys.co.uk <mailto:Catalyst at lists.scsys.co.uk>
>     Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>     Searchable archive:
>     http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
>     Dev site: http://dev.catalyst.perl.org/
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> List: Catalyst at lists.scsys.co.uk
> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
> Searchable archive: http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
> Dev site: http://dev.catalyst.perl.org/
>   




More information about the Catalyst mailing list