CatalystX-ListFramework

 view release on metacpan or  search on metacpan

lib/CatalystX/ListFramework.pm  view on Meta::CPAN

        $c->res->redirect("/get/$kind/$id");
    }

=head1 DESCRIPTION

Displaying tabulated lists of database records, updating those records and
creating new ones is a common task in Catalyst applications.
This class supplies such lists, and forms to edit such records, to a set of
templates, using simple definition files and your L<DBIx::Class> Catalyst
model. A search form is also supplied, which can include JSON-powered
ExtJS comboboxes (see L<http://www.extjs.com/>).

To run the included demo application, grab a copy of ExtJS, then

    cd t/
    ln -s /path/to/extjs/ static/extjs-1.1
    lib/script/testapp_server.pl

then

    firefox http://localhost:3000/start

t/templates/infobox.tt  view on Meta::CPAN

<table border="2" class="boxdata" id="infobox_[% id %]">
<tbody>
<!-- <tr><td class="boxdataheading" colspan=2>[% title %]</td></tr> -->
[% FOREACH data IN boxdata;
    value = data.value;
    id = data.id;
    primary_key = data.primary_key; %]
    <tr>
    <td class="boxdatalabel"><span class="boxdatalabel">[% data.name %]</span></td>
    [% IF data.is_object %]
        [%#   If an .OBJECT, show a textfield with the id in it and alongside it an ext combobox, which sets the textfield.
              Give the combobox an unused name=blah   %]
          <td class="boxdatavalue">
          <input type="text" name="EXT[% id %]" id="EXT[% id %]">
          <SCRIPT>
            Ext.onReady(function(){
                var datastore = new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: '[% c.req.base %]complete/[% data.form_type %]/[% primary_key %]/OBJECT',
                    }),
                    reader: new Ext.data.JsonReader({
                        root: 'results',

t/templates/infobox.tt  view on Meta::CPAN

                    pageSize:15,
                    hideTrigger:false,
                    forceSelection:true,
                    editable:true,
                    triggerAction:'all', /* don't search, just show all */
                    valueNotFoundText:'(not found)',
                });
            
                search.applyTo('EXT[% id %]');
                
                /* With a remote datastore, combobox.setValue doesn't load the store to look up the display value, so
                    we need this hack to load the store and set the combobox's value */
                /* See http://extjs.com/forum/showthread.php?t=4171&highlight=combobox+jsonreader+setvalue&page=2 */
                
                datastore.on('load', function(){
                                                    search.setValue("[% value.$primary_key %]");
                                               });
                datastore.load();
                
            });
          </SCRIPT>
          
          </td>

t/templates/searchbox.tt  view on Meta::CPAN

    });

    [%# Ext's 'change' event only fires when you select a listed entry and blur the field, not when you type data. %]
    [%# Also, the el.clearValue doesn't work -- http://extjs.com/forum/showthread.php?t=3404  %]

    [%# I use ClearableComboBox from http://extjs.com/forum/showthread.php?t=9619 hacked to do clearValue not reset() %]

    search[% ac_counter %].applyTo('searchform_[% prefix %]search-[% formfield.id %]');


    /* With a remote datastore, combobox.setValue doesn't load the store to look up the display value, so
        we need this hack to load the store and set the combobox's value */
    /* http://extjs.com/forum/showthread.php?t=4171&highlight=combobox+jsonreader+setvalue&page=2 */
    
    // NOTE: THIS IS IMPRACTICAL FOR LONG LISTS
    
    // The [0] below is because there are 2 form fields with the same name: extjs's hidden one and our original.
    // I'm not sure why it seems that only one gets sent in the request. :-/
    
    datastore[% ac_counter %].on('load', function(){
                                        search[% ac_counter %].setValue(document.forms.form0["[% prefix %]search-[% formfield.id %]"][0].value);
                                   });
    datastore[% ac_counter %].load();