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

Scott Pham (scpham) scpham at cisco.com
Fri Apr 17 13:44:05 GMT 2009


Comment out console.log and see if that fixes your problem. Please
someone correct me if I'm wrong, but isn't that firebug only?

 

 

 

From: jagdish eashwar [mailto:jagdish.eashwar at gmail.com] 
Sent: Friday, April 17, 2009 12:20 AM
To: The elegant MVC web framework
Subject: Re: [Catalyst] Jason Kohles' tutorial on ExtJs editable data
grids and Catalyst

 

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.

On Thu, Apr 16, 2009 at 9:34 PM, W. Tyler Gee <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> 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 = 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> 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  .  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/

 


_______________________________________________
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/

 

	~Tyler


_______________________________________________
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/20090417/bff1b52c/attachment.htm


More information about the Catalyst mailing list