netzke-basepack-zh 0.7.6

data/lib/netzke/basepack/search_panel/javascripts/condition_field.js

@@ -0,0 +1,160 @@
+Ext.define('Netzke.classes.Basepack.SearchPanel.ConditionField', {
+  extend:     'Ext.form.FieldContainer',
+  alias:      'widget.netzkebasepacksearchpanelconditionfield',
+
+  hideLabel:  true,
+  layout:     'hbox',
+
+  // Config refinements for the value field
+  valueFieldConfigs: {
+    string: {
+      xtype : 'textfield'
+    },
+    datetime: {
+      xtype : 'datefield'
+    },
+    integer: {
+      xtype: 'numberfield'
+    }
+  },
+
+  initComponent: function(){
+    if (!this.attrType) this.attrType = 'string';
+
+    var items = [
+      // attribute combo
+      {
+        xtype     : 'combo',
+        store: this.ownerCt.attrs,
+        allowBlank: true,
+        // store: [],
+        name: this.attr + '_attr',
+        itemId: 'attrCombo',
+        emptyText: 'Attribute',
+        triggerAction: 'all',
+        value: this.attr ? this.attr.underscore() : "",
+        listeners: {
+          select: this.onAttributeChange,
+          scope: this
+        }
+      }
+    ];
+
+    if (this.attr) {
+
+      var operators = this.ownerCt.attributeOperatorsMap[this.attrType] || [[]];
+
+      if (this.attrType === 'boolean') {
+        items.push({
+          xtype     : 'tricheckbox',
+          width: 100,
+          name: this.attr + '_value',
+          itemId: 'valueField',
+          checked: this.value
+        });
+
+        items.push({
+          flex: 1,
+          xtype: 'displayfield'
+        });
+      } else {
+        // operator combo
+        items.push(
+          {
+            width:      100,
+            xtype:      'combo',
+            fieldLabel: 'Operator',
+            hideLabel:  true,
+            store:      operators,
+            name:       this.attr + '_operator',
+            value:      this.operator || operators[0][0],
+            autoSelect: true,
+            triggerAction: 'all',
+            emptyText:  "Operator",
+            itemId:     "operatorCombo"
+          }
+        );
+
+        // value field
+        items.push(Ext.apply(
+          {
+            xtype: 'textfield',
+            emptyText: "Value",
+            flex: 1,
+            name: this.attr + '_value',
+            value: this.value,
+            itemId: "valueField"
+          },
+          this.valueFieldConfigs[this.attrType] // refining the config dependent on the attr type
+        ));
+      }
+
+      // delete button
+      items.push({
+        xtype: 'button',
+        cls: 'x-btn-icon',
+        icon: Netzke.RelativeUrlRoot + "/images/icons/cross.png",
+        handler: this.removeSelf,
+        scope: this
+      });
+    }
+
+    this.items = items;
+
+    // Why on Earth is this not working? Netzke.classes.Basepack.SearchPanel.ConditionField undefined???
+    // Netzke.classes.Basepack.SearchPanel.ConditionField.superclass.initComponent.call(this);
+    // Ext.form.CompositeField.prototype.initComponent.call(this); // workaround
+    this.callParent();
+
+    this.attrCombo = this.getComponent('attrCombo');
+    this.operatorCombo = this.getComponent('operatorCombo');
+    this.valueField = this.getComponent('valueField');
+
+    this.addEvents('configured'); // user selects the attribute from the attribute combo
+  },
+
+  isConfigured: function() {
+    return !!this.attrCombo.getValue();
+  },
+
+  removeSelf: function(){
+    var ownerCt = this.ownerCt;
+    this.destroy();
+    ownerCt.fireEvent('fieldsnumberchange');
+  },
+
+  onAttributeChange: function(e){
+    this.fireEvent('configured');
+    this.changeAttribute(e.value.camelize(true));
+  },
+
+  // Dynamically replace self with a field with different attrType
+  changeAttribute: function(attr){
+    var attrType = this.ownerCt.attrsHash[attr];
+    var idx = this.ownerCt.items.indexOf(this);
+    var owner = this.ownerCt;
+    var newSelf = Ext.createByAlias('widget.netzkebasepacksearchpanelconditionfield', Ext.apply(this.initialConfig, {name: attr, attrType: attrType, attr: attr.underscore(), ownerCt: this.ownerCt, operator: null}));
+    owner.remove(this);
+    owner.insert(idx, newSelf);
+    owner.doLayout();
+  },
+
+  // Returns true if it should be in the query
+  valueIsSet: function(){
+    return !!(this.attrCombo.getValue() && (this.attrType === 'boolean' || this.operatorCombo.getValue()) && !Ext.isEmpty(this.valueField.getValue()));
+  },
+
+  // Returns the query object
+  buildValue: function(){
+    var res = {attr: this.attrCombo.getValue(), value: this.valueField.getValue()};
+    if (this.attrType !== 'boolean') {
+      res.operator = this.operatorCombo.getValue();
+    }
+    return res;
+  },
+
+  clearValue: function() {
+    this.valueField.reset();
+  }
+
+});

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

@@ -0,0 +1,65 @@
+{
+  initComponent: function() {
+    this.callParent();
+    this.buildFormFromQuery(this.presetQuery);
+
+    this.onAddCondition();
+
+  },
+
+  // Will probably need to be performance-optimized in the future, as recreating the fields is expensive
+  buildFormFromQuery: function(query) {
+    this.onClearAll();
+    Ext.each(query, function(f){
+      f.ownerCt = this;
+      this.insert(this.items.length - 1, Ext.createByAlias('widget.netzkebasepacksearchpanelconditionfield', f));
+    }, this);
+    this.doLayout();
+  },
+
+  onAddCondition: function() {
+    var condField = Ext.createByAlias('widget.netzkebasepacksearchpanelconditionfield', {ownerCt: this});
+    condField.on('configured', function() {
+      this.onAddCondition();
+    }, this, {single: true});
+    this.add(condField);
+    this.doLayout();
+    this.fireEvent('fieldsnumberchange');
+  },
+
+  onReset: function() {
+    this.items.each(function(f){
+      if (f.valueField) {f.clearValue();}
+    });
+  },
+
+  onClearAll: function() {
+    this.eachConfiguredField(function(f) {
+      this.remove(f);
+    }, this);
+
+    this.fireEvent('fieldsnumberchange');
+  },
+
+  // Returns each condition field which has attribute selected
+  eachConfiguredField: function(fn, scope) {
+    this.items.each(function(f, i) {
+      if (this.items.last() !== f) {
+        fn.call(scope || f, f);
+      }
+    }, this);
+  },
+
+  // When "all" is "true", also includes the fields with empty values
+  getQuery: function(all) {
+    var query = [];
+    this.eachConfiguredField(function(f){
+      if (f.valueIsSet() || all) {
+        var cond = f.buildValue();
+        if (all) {cond.attrType = f.attrType;}
+        query.push(cond);
+      }
+    });
+    return query;
+  }
+}

data/lib/netzke/basepack/search_window.rb

@@ -0,0 +1,66 @@
+module Netzke
+  module Basepack
+    class SearchWindow < Netzke::Basepack::Window
+
+      action :search do
+        { :text => I18n.t('netzke.basepack.search_window.action.search') }
+      end
+
+      action :cancel do
+        { :text => I18n.t('netzke.basepack.search_window.action.cancel') }
+      end
+
+      js_properties :width => "50%",
+                    :auto_height => true,
+                    :close_action => "hide",
+                    :buttons => [:search.action, :cancel.action],
+                    :modal => true
+
+      def configuration
+        super.tap do |s|
+          s[:items] = [:search_panel.component(:prevent_header => true)]
+          s[:title] = I18n.t('netzke.basepack.search_window.title')
+          s[:persistence] = false
+        end
+      end
+
+      component :search_panel do
+        {
+          :class_name => "Netzke::Basepack::QueryBuilder",
+          :model => config[:model],
+          :fields => config[:fields]
+        }
+      end
+
+      js_method :init_component, <<-JS
+        function(){
+          this.callParent();
+
+          this.on('show', function(){
+            this.closeRes = 'cancel';
+          });
+        }
+      JS
+
+      js_method :get_query, <<-JS
+        function(){
+          return this.items.first().getQuery();
+        }
+      JS
+
+      js_method :on_search, <<-JS
+        function(){
+          this.closeRes = 'search';
+          this.hide();
+        }
+      JS
+
+      js_method :on_cancel, <<-JS
+        function(){
+          this.hide();
+        }
+      JS
+
+    end
+  end
+end

data/lib/netzke/basepack/simple_app.rb

@@ -0,0 +1,104 @@
+module Netzke
+  module Basepack
+    # Basis for a Ext.container.Viewport-based one-page application.
+    #
+    # == Features:
+    # * dynamic loading of components
+    # * browser history support (press the "Back"-button to go to the previously loaded component)
+    # * AJAX activity indicator
+    #
+    # == Extending SimpleApp
+    # You may want to extend SimpleApp to provide a custom layout. Make sure you create three regions with predefined itemId's that will be used by SimpleApp. You can use the following methods defined by SimpleApp: main_panel_config, status_bar_config, and menu_bar_config, e.g.:
+    #
+    #     class MySimpleApp < Netzke::Basepack::SimpleApp
+    #
+    #       def configuration
+    #         super.merge(
+    #           :items => [my_custom_navigation_config, main_panel_config, menu_bar_config, status_bar_config]
+    #         )
+    #       end
+    #
+    #       def my_custom_navigation_config
+    #         {
+    #           :item_id => 'navigation',
+    #           :region => :east,
+    #           :width => 200
+    #         }
+    #       end
+    #
+    #       ...
+    #     end
+    #
+    # The JS side of the component will have those regions referenced as this.mainPanel, this.statusBar, and this.menuBar.
+    class SimpleApp < Base
+
+      js_base_class "Ext.container.Viewport"
+
+      js_property :layout, :border
+      #js_include "#{File.dirname(__FILE__)}/../../../../../../public/extjs/examples/ux/statusbar/StatusBar.js"
+      js_include Netzke::Core.ext_path.join("examples", "ux/statusbar/StatusBar.js"), :statusbar_ext
+
+      js_mixin :simple_app
+
+      # In Ext 4.1 calling `render` on a viewport causes an error
+      def js_component_render
+        ""
+      end
+
+      def configuration
+        super.merge(
+          :items => [main_panel_config, menu_bar_config, status_bar_config]
+        )
+      end
+
+      # Override for custom menu
+      def menu
+        []
+      end
+
+      # Config for the main panel, which will contain dynamically loaded components.
+      def main_panel_config(overrides = {})
+        {
+          :itemId => 'main_panel',
+          :region => 'center',
+          :layout => 'fit'
+        }.merge(overrides)
+      end
+
+      # Config for the status bar
+      def status_bar_config(overrides = {})
+        {
+          :itemId => 'status_bar',
+          :xtype => 'statusbar',
+          :region => 'south',
+          :height => 22,
+          :statusAlign => 'right',
+          :busyText => 'Busy...',
+          :default_text => "Ready",
+          :default_icon_cls => ""
+        }.merge(overrides)
+      end
+
+      # Config for the menu bar
+      def menu_bar_config(overrides = {})
+        {
+          :itemId => 'menu_bar',
+          :xtype => 'toolbar',
+          :region => 'north',
+          :height => 28,
+          :items => menu
+        }.merge(overrides)
+      end
+
+      # Html required for Ext.History to work
+      def js_component_html
+        super << %Q{
+  <form id="history-form" class="x-hidden">
+      <input type="hidden" id="x-history-field" />
+      <iframe id="x-history-frame"></iframe>
+  </form>
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,64 @@
+{
+  initComponent: function(){
+    this.callParent();
+
+    this.mainPanel = this.down('panel[itemId="main_panel"]');
+    this.menuBar   = this.down('container[itemId="menu_bar"]');
+    var statusBar = this.statusBar = this.down('container[itemId="status_bar"]');
+
+    Ext.util.History.on('change', this.processHistory, this);
+
+    // Setting the "busy" indicator for Ajax requests
+    Ext.Ajax.on('beforerequest',    function(){ statusBar.showBusy(); });
+    Ext.Ajax.on('requestcomplete',  function(){ statusBar.hideBusy(); });
+    Ext.Ajax.on('requestexception', function(){ statusBar.hideBusy(); });
+
+    // Initialize history
+    Ext.util.History.init();
+  },
+
+  afterRender: function(){
+    this.callParent();
+
+    // If we are given a token, load the corresponding component, otherwise load the last loaded component
+    var currentToken = Ext.util.History.getToken();
+    if (currentToken != "") {
+      this.processHistory(currentToken);
+    } else {
+      var lastLoaded = this.initialConfig.componentToLoad; // passed from the server
+      if (lastLoaded) Ext.util.History.add(lastLoaded);
+    }
+  },
+
+  processHistory: function(token){
+    if (token){
+      this.mainPanel.removeAll();
+      this.loadNetzkeComponent({name: token, container: this.mainPanel});
+    } else {
+      this.mainPanel.removeAll();
+    }
+  },
+
+  // instantiateComponent: function(config){
+  //   this.mainPanel.instantiateChild(config);
+  // },
+
+  appLoadComponent: function(name){
+    Ext.util.History.add(name);
+  },
+
+  loadNetzkeComponentByAction: function(action){
+    var componentName = action.component || action.name;
+    if (componentName) this.appLoadComponent(componentName);
+  },
+
+  // DEPRECATED
+  loadComponentByAction: function(action) {
+    Netzke.deprecationWarning("loadComponentByAction is deprecated in favor of loadNetzkeComponentByAction");
+    this.loadNetzkeComponentByAction(action);
+  },
+
+  onToggleConfigMode: function(params){
+    this.toggleConfigMode();
+  }
+}