—

              
#
# This file is part of HTML-FormFu-ExtJS
#
# This software is Copyright (c) 2011 by Moritz Onken.
#
# This is free software, licensed under:
#
#   The (three-clause) BSD License
#
package HTML::FormFu::ExtJS::Element::Select;
BEGIN {
  $HTML::FormFu::ExtJS::Element::Select::VERSION = '0.090';
}
use base "HTML::FormFu::ExtJS::Element::_Group";
use strict;
use warnings;
use utf8;
use Carp;
use JavaScript::Dumper;
sub render {
        my $class = shift;
        my $self  = shift;
        my $super = $class->SUPER::render($self);
    my $attrs = {};
    my $url = $super->{url};
    if($url && !$super->{id}) {
        carp 'Cannot create remote store without a field id';
        delete $super->{url};
    }
    if ($super->{store} && ref $super->{store} ne "SCALAR") {
            $super->{store} = \"$super->{store}";
    } elsif ($super->{url}) {
        $attrs->{hiddenValue} = $self->default;
        $super->{value} = $super->{loading} || 'Loading...';
        delete $super->{loading};
        my $load_function;
        my $load_exception_function;
        if ($super->{multiple} && $super->{xtype} eq 'multiselect') {
            $attrs->{xtype} = 'multiselect';
            $load_function = "
                    var multiselect = Ext.getCmp('$super->{id}');
                    var value = multiselect.hiddenValue;
                    //multiselect.reset();
                    if (value) {
                        if (Ext.version = '3.0') {
                            multiselect.setValue(value);
                        }
                        else if (record = store.getById(value)) {
                            multiselect.setValue(record.data.text);
                        }
                    }";
            $load_exception_function = "
                    var combobox = Ext.getCmp('$super->{id}');
                    combobox.markInvalid(error || response.statusText);";
        }
        else {
            $load_function = "
                    var combobox = Ext.getCmp('$super->{id}');
                    var value = combobox.hiddenValue;
                    combobox.clearValue();
                    if (value) {
                        if (Ext.version = '3.0') {
                            combobox.setValue(value);
                        }
                        else if (record = store.getById(value)) {
                            combobox.setValue(record.data.text);
                        }
                    }";
            $load_exception_function = "
                    var combobox = Ext.getCmp('$super->{id}');
                    combobox.clearValue();
                    combobox.markInvalid(error || response.statusText);";
        }
        $super->{store} = \"new Ext.data.SimpleStore({
            fields:['value','text'],
            id:0,
            autoLoad:true,
            proxy:new Ext.data.HttpProxy({
                url:'$url',
                method:'GET',
                disableCaching:false
            }),
            listeners:{
                load:function(store, records, options) {
                    $load_function
                },
                loadexception:function(store, options, response, error) {
                    $load_exception_function
                }
            }
        })";
        delete $super->{url};
    } else {
        $attrs->{mode} = "local";
        my $data;
        foreach my $option ( @{ $self->render_data->{options} } ) {
                push( @{$data}, [ $option->{value}, $option->{label} ] );
                if($option->{group} && (my @groups = @{$option->{group}})) {
                        foreach my $item (@groups) {
                                push(@{$data}, [$item->{value},$item->{label}]);
                        }
                }
        }
        my $string = js_dumper( { fields => [ "value", "text" ], data => $data } );
        $super->{store} = \("new Ext.data.SimpleStore(" . $string . ")");
    }
    return {
                editable       => \0,
                displayField   => "text",
        valueField     => "value",
        hiddenId       => $self->name . '_hidden',
                hiddenName     => $self->name,
                autoWidth      => \0,
                forceSelection => \1,
                triggerAction  => "all",
                xtype          => "combo",
                %{$super},
        %{$attrs}
        };
}
1;
HideShow 141 lines of Pod
__END__
=pod
=head1 NAME
HTML::FormFu::ExtJS::Element::Select
=head1 VERSION
version 0.090
=head1 DESCRIPTION
Creates a select box.
The default ExtJS setup is:
  "mode"           : "local",
  "editable"       : false,
  "displayField"   : "text",
  "valueField"     : "value",
  "hiddenId"       : $self->name . '_hidden',
  "hiddenName"     : $self->name,
  "autoWidth"      : false,
  "forceSelection" : true,
  "triggerAction"  : "all",
  "store"          : new Ext.data.SimpleStore( ... ),
  "xtype"          : "combo"
This acts like a standard html select box. If you want a more ajaxish select box (e.g. editable) you can override these values with L</attrs|HTML::FormFu>.
The value of C<store> will always be unquoted. You can either provide a variable name which points to an instance
of an C<Ext.data.Store> class or create the instance right away.
=head2 MultiSelect
  - type: Select
    multiple: 1
    attrs:
      xtype: multiselect
Requires the MultiSelect user extension.
=head2 Remote Store
If you want to load the values of the combo box from an URL you can either create your own C<Ext.data.Store> instance
or let this class handle this.
=head3 Built-in remote store
  - type: Select
    name: combo
    id: unique_identifier
    attrs:
      url: /get_data
This will create a remote store instance which will fetch the data from C<url>. Make sure you give the 
select field an unique id. Otherwise the store will not be attached and a warning is thrown.
You can customize the text which is shown while the store is being loaded. It defaults to C<Loading...> and 
can be changed by setting the C<loading> attribute:
- type: Select
  name: combo
  id: unique_identifier
  attrs:
    url: /get_data
    loading: Wird geladen...
=head3 Custom C<Ext.data.Store> instance
    var dataStore = new Ext.data.JsonStore({
        url: '/get_data',
        root: 'rows',
        fields: ["text", "id"]
    });
C</get_data> has to return a data structure like this:
    {
       "rows" : [
          {
             "text" : "Item #1",
             "value" : "1234"
          }
       ]
    }
To add that store to your Select field, the configuration has to look like this:
  - type: Select
    name: combo
    attrs:
      store: dataStore
You can also overwrite the field names for C<valueField> and C<displayField> by adding them to the C<attrs>:
    - type: Select
      name: combo
      attrs:
        store: dataStore
        valueField: title
        displayField: id
Make sure that the store is loaded before you call C<form.load()> on that form. Otherwise the combo box field cannot
resolve the value to the corresponding label.
=head1 NAME
HTML::FormFu::ExtJS::Element::Select - Select box
=head1 SEE ALSO
L<HTML::FormFu::Element::Text>
=head1 AUTHORS
Moritz Onken (mo)
Alexander Hartmaier (abraxxa)
=head1 COPYRIGHT & LICENSE
Copyright 2009 Moritz Onken, all rights reserved.
This program is free software; you can redistribute it and/or modify it
under the same terms as Perl itself.
=head1 AUTHOR
Moritz Onken <onken@netcubed.de>
=head1 COPYRIGHT AND LICENSE
This software is Copyright (c) 2011 by Moritz Onken.
This is free software, licensed under:
  The (three-clause) BSD License
=cut