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

[jagdish eashwar]

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 =3D 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 =3D true;


    var People =3D Ext.data.Record.create([
        { name:    'id',        type: 'int'},
        { name: 'name',        type: 'string'},
        { name: 'occupation',    type: 'string'}
    ]);


    var store =3D new Ext.data.JsonStore({
        url: gridurl,
        root: 'people',
        fields: People
    });

var grid =3D 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 =3D 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 =3D new Array();
                    var dirty =3D store.getModifiedRecords();
                    for ( var i =3D 0 ; i < dirty.length ; i++ ) {
                        var id =3D dirty[i].get( 'id' );
                        var fields =3D dirty[i].getChanges();
                        fields.id =3D 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 =3D 'Advent AJAX Grid' %]
<script type =3D "text/javascript">
    var posturl =3D '[% Catalyst.uri_for("/people_data_submit") %]';
    var gridurl =3D '[% Catalyst.uri_for("/people_data") %]';
</script>
[% js_link (src =3D '/static/advent.js') %]
<div id =3D "datagrid"></div>
<select id=3D"occpopup" style=3D"display: none">
<option value=3D"SBI">SBI</option>
<option value=3D"IBS">IBS</option>
<option value=3D"ICICI">ICICI</option>
<option value=3D"SELF">SELF</option>
</select>




On Thu, Apr 16, 2009 at 7:41 PM, Peter Karman <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 t=
he
> > 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 wi=
th
> > 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  .  http://peknet.com/
>
>
> _______________________________________________
> 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/
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20090416/863a7=
e71/attachment.htm