netzke-basepack 0.6.5 → 0.7.0

data/lib/netzke/basepack/border_layout_panel.rb

@@ -1,6 +1,10 @@
 module Netzke
   module Basepack
-    # Panel with border layout
+    # Panel with border layout.
+    #
+    # == Features
+    #   * When persistence enabled, remembers the sizes and collapsed/expanded states of its regions.
+    #
     # == Example configuration:
     #
     #     :items => [
@@ -8,13 +12,15 @@ module Netzke
     #       {:title => "Item Two", :class_name => "Basepack::Panel", :region => :west, :width => 300, :split => true}
     #     ]
     class BorderLayoutPanel < Netzke::Base
+      js_mixin :border_layout_panel
+
       def items
         @border_layout_items ||= begin
           updated_items = super
 
           if config[:persistence]
             updated_items.each do |item|
-              region = item[:region] || components[item[:component]][:region]
+              region = item[:region] || components[item[:netzke_component]][:region]
               item.merge!({
                 :width => state[:"#{region}_region_width"],
                 :height => state[:"#{region}_region_height"],
@@ -22,64 +28,10 @@ module Netzke
               })
             end
           end
-          
+
           updated_items
         end
       end
-      
-      js_property :layout, :border
-      
-      js_method :init_component, <<-JS
-        function(){
-          Ext.each(['center', 'west', 'east', 'south', 'north'], function(r){
-            // A function to access a region component (even if the component gets reloaded, the function will work).
-            // E.g.: getEastComponent()
-            var methodName = 'get'+r.capitalize()+'Component';
-            this[methodName] = function(){
-              Netzke.deprecationWarning("Instead of '" + methodName + "' use getChildComponent('<name of your component>').");
-              return this.find('region', r)[0];
-            }.createDelegate(this);
-          }, this);
-
-          // Now let Ext.Panel do the rest
-          #{js_full_class_name}.superclass.initComponent.call(this);
-
-          // First time on "afterlayout", set resize events
-          if (this.persistence) {this.on('afterlayout', this.setRegionEvents, this, {single: true});}
-        }
-      JS
-      
-      js_method :set_region_events, <<-JS
-        function(){
-          this.items.each(function(item, index, length){
-            if (!item.oldSize) item.oldSize = item.getSize(); // remember initial size
-              
-            item.on('resize', function(panel, w, h){
-              if (panel.region !== 'center' && w && h) {
-                var params = {region:panel.region};
-              
-                if (panel.oldSize.width != w) {
-                  params.width = w;
-                } else {
-                  params.height = h;
-                }
-              
-                panel.oldSize = panel.getSize();
-                this.regionResized(params);
-              }
-            }, this);
-
-            item.on('collapse', function(panel){
-              this.regionCollapsed({region: panel.region});
-            }, this);
-            
-            item.on('expand', function(panel){
-              this.regionExpanded({region: panel.region});
-            }, this);
-            
-          }, this);
-        }
-      JS
 
       endpoint :region_resized do |params|
         size_state_hash = {}

data/lib/netzke/basepack/border_layout_panel/javascripts/border_layout_panel.js

@@ -0,0 +1,40 @@
+{
+  layout: 'border',
+
+  initComponent: function(){
+    this.callParent();
+
+    // First time on "afterlayout", set resize events
+    if (this.persistence) {this.on('afterlayout', this.setRegionEvents, this, {single: true});}
+  },
+
+  setRegionEvents: function(){
+    this.items.each(function(item, index, length){
+      if (!item.oldSize) item.oldSize = item.getSize(); // remember initial size
+
+      item.on('resize', function(panel, w, h){
+        if (panel.region !== 'center' && w && h) {
+          var params = {region:panel.region};
+
+          if (panel.oldSize.width != w) {
+            params.width = w;
+          } else {
+            params.height = h;
+          }
+
+          panel.oldSize = panel.getSize();
+          this.regionResized(params);
+        }
+      }, this);
+
+      item.on('collapse', function(panel){
+        this.regionCollapsed({region: panel.region});
+      }, this);
+
+      item.on('expand', function(panel){
+        this.regionExpanded({region: panel.region});
+      }, this);
+
+    }, this);
+  }
+}

data/lib/netzke/basepack/data_accessor.rb

@@ -1,5 +1,3 @@
-require 'netzke/active_record'
-
 module Netzke
   module Basepack
     # This module is included into such data-driven components as GridPanel, FormPanel, PagingFormPanel, etc.
@@ -14,7 +12,7 @@ module Netzke
         if options
           query ? options.select{ |o| o.index(/^#{query}/) }.map{ |el| [el] } : options
         else
-          assoc, assoc_method = assoc_and_assoc_method_for_column(column)
+          assoc, assoc_method = assoc_and_assoc_method_for_attr(column)
 
           if assoc
             # Options for an asssociation attribute
@@ -66,7 +64,7 @@ module Netzke
       end
 
       # Returns association and association method for a column
-      def assoc_and_assoc_method_for_column(c)
+      def assoc_and_assoc_method_for_attr(c)
         assoc_name, assoc_method = c[:name].split('__')
         assoc = data_class.reflect_on_association(assoc_name.to_sym) if assoc_method
         [assoc, assoc_method]
@@ -100,7 +98,7 @@ module Netzke
       # Mark an attribute as "virtual" by default, when it doesn't reflect a model column, or a model column of an association
       def set_default_virtual(c)
         if c[:virtual].nil? # sometimes at maybe handy to mark a column as non-virtual forcefully
-          assoc, assoc_method = assoc_and_assoc_method_for_column(c)
+          assoc, assoc_method = assoc_and_assoc_method_for_attr(c)
           if assoc
             c[:virtual] = true if !assoc.klass.column_names.map(&:to_sym).include?(assoc_method.to_sym)
           else

data/lib/netzke/basepack/form_panel.rb

@@ -4,22 +4,23 @@ require "netzke/basepack/form_panel/services"
 
 module Netzke
   module Basepack
-    # Ext.form.FormPanel-based component with different goodies
+    # Ext.form.Panel-based component
     #
     # == Configuration
-    # Besides all the standard +Ext.form.FormPanel+ config options, accepts:
     # * +model+ - name of the ActiveRecord model that provides data to this GridPanel.
     # * +record+ - record to be displayd in the form. Takes precedence over +:record_id+
     # * +record_id+ - id of the record to be displayd in the form. Also see +:record+
+    # * +items+ - the layout of the fields as an array. See "Layout configuration".
     # * +mode+ - render mode, accepted options:
     #   * +lockable+ - makes the form panel load initially in "display mode", then lets "unlock" it, change the values, and "lock" it again, while updating the values on the server
     # * +updateMask+ - +Ext.LoadMask+ config options for the mask shown while the form is submitting its values
+    # Besides, FormPanel can accept any meaninful :
     #
     # === Layout configuration
     # The layout of the form is configured by supplying the +item+ config option, same way it would be configured in Ext (thus allowing for complex form layouts). FormPanel will expand fields by looking at their names (unless +no_binding+ set to +true+ is specified for a specific field).
     class FormPanel < Netzke::Base
 
-      js_base_class "Ext.form.FormPanel"
+      js_base_class "Ext.form.Panel"
 
       # Class-level configuration
       class_attribute :config_tool_available
@@ -77,10 +78,12 @@ module Netzke
       js_include :n_radio_group, :readonly_mode
       css_include :readonly_mode
 
-      js_include Netzke::Core.ext_location.join("examples/ux/fileuploadfield/FileUploadField.js")
-      css_include Netzke::Core.ext_location.join("examples/ux/fileuploadfield/css/fileuploadfield.css")
+      # WIP
+      # js_include Netzke::Core.ext_path.join("examples/ux/fileuploadfield/FileUploadField.js")
+      # css_include Netzke::Core.ext_path.join("examples/ux/fileuploadfield/css/fileuploadfield.css")
 
-      js_include :misc
+      # WIP: Needed for FileUploadField
+      # js_include :misc
 
       def js_config
         super.tap do |res|
@@ -98,61 +101,61 @@ module Netzke
         @record ||= config[:record] || config[:record_id] && data_class && data_class.where(data_class.primary_key => config[:record_id]).first
       end
 
-      def configuration_components
-        res = []
-
-          res << {
-            :name              => 'fields',
-            :class_name => "FieldsConfigurator",
-            :active            => true,
-            :owner             => self,
-            :persistent_config => true
-          }
-
-          res << {
-            :name               => 'general',
-            :class_name  => "PropertyEditor",
-            :component             => self,
-            :title => false
-          }
-
-          res
-        end
+      # def configuration_components
+      #   res = []
+      #
+      #   res << {
+      #     :name              => 'fields',
+      #     :class_name => "FieldsConfigurator",
+      #     :active            => true,
+      #     :owner             => self,
+      #     :persistent_config => true
+      #   }
+      #
+      #   res << {
+      #     :name               => 'general',
+      #     :class_name  => "PropertyEditor",
+      #     :component             => self,
+      #     :title => false
+      #   }
+      #
+      #   res
+      # end
+
+      def self.property_fields
+        res = [
+          {:name => "ext_config__title",               :attr_type => :string},
+          {:name => "ext_config__header",              :attr_type => :boolean, :default => true},
+          {:name => "ext_config__bbar",              :attr_type => :json}
+        ]
+
+        res
+      end
 
-        def self.property_fields
-          res = [
-            # {:name => "ext_config__title",               :attr_type => :string},
-            # {:name => "ext_config__header",              :attr_type => :boolean, :default => true},
-            # {:name => "ext_config__bbar",              :attr_type => :json}
-          ]
+      private
 
-          res
+        def self.server_side_config_options
+          super + [:record, :scope]
         end
 
-        private
-
-          def self.server_side_config_options
-            super + [:record, :scope]
+        def meta_field
+          {}.tap do |res|
+            assoc_values = get_association_values
+            res[:association_values] = assoc_values.literalize_keys if record && !assoc_values.empty?
           end
+        end
 
-          def meta_field
-            {}.tap do |res|
-              assoc_values = get_association_values
-              res[:association_values] = assoc_values.literalize_keys if record && !assoc_values.empty?
-            end
+        def get_association_values
+          fields_that_need_associated_values = fields.select{ |k,v| k.to_s.index("__") && !fields[k][:nested_attribute] }
+          # Take care of Ruby 1.8.7
+          if fields_that_need_associated_values.is_a?(Array)
+            fields_that_need_associated_values = fields_that_need_associated_values.inject({}){|r,(k,v)| r.merge(k => v)}
           end
 
-          def get_association_values
-            fields_that_need_associated_values = fields.select{ |k,v| k.to_s.index("__") && !fields[k][:nested_attribute] }
-            # Take care of Ruby 1.8.7
-            if fields_that_need_associated_values.is_a?(Array)
-              fields_that_need_associated_values = fields_that_need_associated_values.inject({}){|r,(k,v)| r.merge(k => v)}
-            end
-
-            fields_that_need_associated_values.each_pair.inject({}) do |r,(k,v)|
-              r.merge(k => record.value_for_attribute(fields_that_need_associated_values[k], true))
-            end
+          fields_that_need_associated_values.each_pair.inject({}) do |r,(k,v)|
+            r.merge(k => record.value_for_attribute(fields_that_need_associated_values[k], true))
           end
+        end
 
       # include ::Netzke::Plugins::ConfigurationTool if config_tool_available # it will load ConfigurationPanel into a modal window
     end

data/lib/netzke/basepack/form_panel/fields.rb

@@ -179,9 +179,11 @@ module Netzke
           def attr_type_to_xtype_map
             {
               :integer => :numberfield,
-              :boolean => :checkbox,
+              :boolean => :checkboxfield,
               :date => :datefield,
-              :datetime => :datetimefield,
+              # WIP: waiting for datetime.js implementation for ExtJS 4
+              # :datetime => :datetimefield,
+
               :text => :textarea,
               :json => :jsonfield,
               :string => :textfield

data/lib/netzke/basepack/form_panel/javascripts/comma_list_cbg.js

@@ -6,52 +6,38 @@ Config options:
 * separator - separator of values in the string (defaults to ",")
 * options - all checkboxes, by boxLabel, e.g.: ["Cool", "To read", "Important"]
 */
-Ext.netzke.form.CommaListCbg = Ext.extend(Ext.form.CheckboxGroup, {
+Ext.define('Ext.netzke.form.CommaListCbg', {
+  extend: 'Ext.form.CheckboxGroup',
+  alias: 'widget.commalistcbg',
   separator: ",",
 
   initComponent: function(){
-    Ext.netzke.form.CommaListCbg.superclass.initComponent.call(this);
-
     this.items = [];
     Ext.each(this.options, function(o){
-      this.items.push({boxLabel: o});
-    }, this);
-
-    this.on('change', function(el){
-      this.hiddenEl.dom.value = this.getValue();
+      this.items.push({ boxLabel: o, displayOnly:true });
     }, this);
-  },
 
-  onRender: function(ct, position){
-    Ext.netzke.form.CommaListCbg.superclass.onRender.call(this, ct, position)
-    this.hiddenEl = Ext.DomHelper.append(ct, {tag:'input', type: 'hidden', name: this.name}, true);
-
-    // Don't submit individual checkboxes
-    this.items.each(function(i){
-      i.el.dom.removeAttribute("name");
-    });
+    this.callParent();
   },
 
-  getValue: function(){
-    var checkedBoxes = Ext.netzke.form.CommaListCbg.superclass.getValue.call(this);
+  getSubmitData: function(){
     var res = [];
-    Ext.each(checkedBoxes, function(cb){
-      res.push(cb.boxLabel);
-    });
+    Ext.each(this.getChecked(), function( item ){ res.push( item.boxLabel ) });
     res = res.join(this.separator);
-    return res;
+    var o = {};
+    o[this.name]=res;
+    return o;
   },
 
   setValue: function(v){
     if (Ext.isString(v)) {
       var passedValues = v.split(this.separator);
-      var values = [];
       this.items.each(function(i){
-        values.push(passedValues.indexOf(i.boxLabel) >= 0);
+        i.setValue( passedValues.indexOf(i.boxLabel) >= 0 );
       });
-      Ext.netzke.form.CommaListCbg.superclass.setValue.call(this, values);
+    // we can alse set values the Ext way
     } else {
-      Ext.netzke.form.CommaListCbg.superclass.setValue.call(this, arguments);
+      this.callParent(arguments);
     }
   },
 
@@ -63,4 +49,3 @@ Ext.netzke.form.CommaListCbg = Ext.extend(Ext.form.CheckboxGroup, {
 
 });
 
-Ext.reg('commalistcbg', Ext.netzke.form.CommaListCbg);

data/lib/netzke/basepack/form_panel/javascripts/form_panel.js

@@ -1,8 +1,8 @@
 {
   bodyStyle     : 'padding:5px 5px 0',
   autoScroll    : true,
-  labelWidth    : 150,
-  applyMask     : {msg: "Updating..."},
+  fieldDefaults : { labelWidth : 150 },
+  applyMask     : { msg: "Updating..." },
 
   defaults       : {
     anchor       : '-20', // to leave some space for the scrollbar
@@ -17,6 +17,13 @@
   },
 
   initComponent: function(){
+    // passing config options to BasicForm is possible via initialConfig only
+    // see Ext.form.Panel documentation
+    this.initialConfig = {
+      // form tracks it's default field values so they can be reset()
+      trackResetOnLoad: true,
+    }
+
     if (!this.bbar) this.bbar = {xtype: 'toolbar'}; // an empty bbar by default, so that we can dynamically add buttons
 
     // Custom error reader. We don't use it to process form values, but rather to normalize the response from the server in case of "real" (iframe) form submit.
@@ -32,15 +39,17 @@
 
     this.initialConfig.errorReader = new ErrorReader();
 
+    // this.getForm().trackResetOnLoad = true;
+
     // Now let Ext.form.FormPanel do the rest
-    Netzke.classes.Basepack.FormPanel.superclass.initComponent.call(this);
+    this.callParent(arguments);
 
     // To inform the parent about the apply event
-    this.addEvents('apply');
+    this.addEvents('apply', 'cancel');
   },
 
   afterRender: function(){
-    Netzke.classes.Basepack.FormPanel.superclass.afterRender.call(this);
+    this.callParent();
 
     // have a record to be displayed?
     if (this.record) { this.setFormValues(this.record); }
@@ -54,33 +63,39 @@
   },
 
   onCancel: function(){
+    this.getForm().reset();
     this.setReadonlyMode(true, true);
   },
 
   updateToolbar: function(){
-    var tbar = this.getBottomToolbar();
-
-    if (this.inReadonlyMode) {
-      var buttonIndex = tbar.items.findIndex("name", "apply");
-      var buttonToRemove = tbar.items.itemAt(buttonIndex);
-      if (buttonToRemove) {
-        tbar.remove(buttonToRemove);
+    var tbar = this.child('toolbar');
+
+    if ( this.inReadonlyMode ) {
+      //   if the form in readonly mode, remove "Apply" and "Cancel"
+      //   buttons from toolbar and add "Edit" button
+      var buttonToRemove = tbar.child("button[name='apply']");
+      if ( buttonToRemove ) {
+        tbar.remove( buttonToRemove );
       }
 
-      var buttonIndex = tbar.items.findIndex("name", "cancel");
-      var buttonToRemove = tbar.items.itemAt(buttonIndex);
-      if (buttonToRemove) {
-        tbar.remove(buttonToRemove);
+      var buttonToRemove = tbar.child("button[name='cancel']");
+      if ( buttonToRemove ) {
+        tbar.remove( buttonToRemove );
       }
-      tbar.add(this.actions.edit);
+
+      tbar.add( this.actions.edit );
+
     } else {
+      // if the form editable, remove "edit" button and
+      // insert "apply" and "cancel" instead
+
       var buttonIndex = tbar.items.findIndex("name", "edit");
-      var buttonToRemove = tbar.items.itemAt(buttonIndex);
+      var buttonToRemove = tbar.items.getAt(buttonIndex);
       if (buttonToRemove) {
         tbar.remove(buttonToRemove);
       }
-      tbar.insertButton(buttonIndex, this.actions.apply);
-      tbar.insertButton(buttonIndex, this.actions.cancel);
+      tbar.insert( buttonIndex, this.actions.cancel );
+      tbar.insert( buttonIndex, this.actions.apply );
     }
 
     tbar.doLayout();
@@ -88,33 +103,40 @@
 
   onApply: function() {
     if (this.fireEvent('apply', this)) {
-      var values = this.getForm().getFieldValues();
-
+      var values = this.getForm().getValues();
       for (var fieldName in values) {
         var field = this.getForm().findField(fieldName);
 
         // TODO: move the following checks to the server side (through the :display_only option)
 
         // do not submit values from disabled fields
-        if (!field || field.disabled) delete values[fieldName];
+        if (!field || field.disabled) {
+          delete values[fieldName];
+        }
 
         // do not submit values from read-only association fields
         if (field
           && field.name.indexOf("__") !== -1
-          && (field.readOnly || !field.getStore)
+          && (field.readOnly || !field.isXType('combobox'))
           && (!field.nestedAttribute) // except for "nested attributes"
-        ) delete values[fieldName];
+        ) {
+          delete values[fieldName];
+        }
 
         // do not submit values from displayfields
-        if (field.isXType('displayfield')) delete values[fieldName];
+        if (field.isXType('displayfield')) {
+          delete values[fieldName];
+        }
 
         // do not submit displayOnly fields
-        if (field.displayOnly) delete values[fieldName];
+        if (field.displayOnly) {
+          delete values[fieldName];
+        }
       }
-
+      // WIP: commented out on 2011-05-11 because of fatal errors
       // apply mask
-      if (!this.applyMaskCmp) this.applyMaskCmp = new Ext.LoadMask(this.bwrap, this.applyMask);
-      this.applyMaskCmp.show();
+      // if (!this.applyMaskCmp) this.applyMaskCmp = new Ext.LoadMask(this.bwrap, this.applyMask);
+      // this.applyMaskCmp.show();
 
       // We must use a different approach when the form is multipart, as we can't use the endpoint
       if (this.fileUpload) {
@@ -155,9 +177,11 @@
   setFormValues: function(values){
     var assocValues = values._meta.associationValues || {};
     for (var assocFieldName in assocValues) {
-      var assocField = this.find('name', assocFieldName)[0];
-      if (assocField.getStore) {
-        assocField.getStore().loadData({data: [[values[assocFieldName], assocValues[assocFieldName]]]});
+
+      var assocField = this.getForm().getFields().filter('name', assocFieldName).first();
+      if (assocField.isXType('combobox')) {
+        // HACK: using private property 'store' here!
+        assocField.store.loadData([[values[assocFieldName], assocValues[assocFieldName]]]);
         delete assocField.lastQuery; // force loading the store next time user clicks the trigger
       } else {
         assocField.setValue(assocValues[assocFieldName]);
@@ -170,7 +194,10 @@
 
   setReadonlyMode: function(onOff, cancel){
     if (this.inReadonlyMode == onOff) return;
-    this.getForm().items.each(function(i){i.setReadonlyMode(onOff);});
+    this.getForm().getFields().each(function(i){
+      if (i.setReadonlyMode) i.setReadonlyMode(onOff);
+    });
+
     // this.getForm().cleanDestroyed(); // because fields inside of composite fields are not auto-cleaned!
     this.doLayout();
     this.inReadonlyMode = onOff;