[Catalyst] Jason Kohles' tutorial on ExtJs editable data gridsand
Catalyst
Craig McLaughlin
cpm at bitbucket.com
Fri Apr 17 20:16:29 GMT 2009
Howdy,
So for grins and giggles I ran through the demo and brute forced it until
it worked (this doesn't imply anything other than I'm not a rocket
scientist with this stuff and that I'm really good at making dumb
mistakes).
I am running the following: ubuntu 8.04, Catalyst 5.71001, ExtJS 2.2.1.
I had to change Catalyst.uri_for to c.uri_for in index.tt2 (I believe you
can also get around this by setting
CATALYST_VAR = 'Catalyst' in your config somewhere. I chose to use 'c' as
that's my default these days.
Other than that, I had a few issues making sure my js functions were in the
right place, but that was it (I am not a .js guy by nature).
I was able to successfully add and edit people, and changes were reflected
in the database [tested by command line:
'sqlite3 advent.db "select * from people"' ]
If I were in your shoes, I'd probably take another look at getting your
Catalyst / c situation figured out.
Sorry this isn't a direct answer... here's hoping at least a 'here's what I
did and it worked' helps a bit.
Cheers,
--Craig
On Fri, 17 Apr 2009 14:38:43 +0530, jagdish eashwar
<jagdish.eashwar at gmail.com> wrote:
> Hi Ian,
>
> I am using ubuntu 8.04 and firefox 2 and no firebug because on my ubuntu
> installation firefox 3 hangs and I am unable to install a version of
> firebug
> that is compatible with firefox 2. In the absence of firebug, I looked
for
> the javascript errors in the firefox error log and there were none.
> I am hoping that when ubuntu 9.04 is released a little later this month,
I
> will be able to start using firefox 3 and firebug.
> I am working through Jason Kohle's tutorial on a single computer. It's a
> good tutorial and all of it 'just worked' except for saving changes back
> to
> the database.
> On Fri, Apr 17, 2009 at 12:27 PM, Ian Docherty
> <catalyst at iandocherty.com>wrote:
>
>>
>> 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/
>>>
>>>
>>
>>
>> _______________________________________________
>> 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