如何过滤一个组合框,它依赖于网格或形式的其他组合框(netzke)?

时间:2013-05-05 05:51:50

标签: ruby-on-rails extjs combobox netzke

域模型:type1,type2,type3和plant。

$ rails g model type1 name:string
$ rails g model type2 name:string
$ rails g model type3 type1:references type2:references name:string
$ rails g model plant type1:references type2:references type3:references name:string

在工厂的网格面板中,将有三个组合框列:type1,type2和type3。 Type3取决于type1和type2。当选择type1和type2中的任何一个时,如何过滤type3组合框?

1 个答案:

答案 0 :(得分:4)

我是Rails和Netzke的新手,但这就是我解决问题的方法。

首先,如果Type3依赖于Type1和Type2,那么只应在Plant中引用Type3。

所以,而不是

rails g model plant type1:references type2:references type3:references name:string

使用

rails g model plant type3:references name:string

您始终可以使用Netzke的__(双下划线)表示法引用type1和type2。这是我的植物网格版本。我不允许内联编辑,除了大多数琐碎的模型。

class Plants < Netzke::Basepack::Grid
  def configure(c)
    super
    c.model = 'Plant'
    c.persistence = true
    c.columns = [
      { name: :type3__type1__name, header: 'Type 1'},
      { name: :type3__type2__name, header: 'Type 2'},
      { name: :type3__name, header: 'Type 3'},
      { name: :name, header: 'Plant Name' }
    ]
    c.enable_edit_inline = false
    c.enable_add_inline = false
  end

  def preconfigure_record_window(c)
    super
    c.form_config.klass = PlantForm
  end
end

要连接您需要的组合框:

  1. 定义type3组合的范围,使其数据依赖于type1和type2 ID。

    #Example scope definition
    scope: {type1_id: component_session[:type1_id],
            type2_id: component_session[:type2_id]}
    
  2. 为type1和type2组合定义侦听器(请参阅js_configure方法)。监听器将检测type1和type2中的任何更改,并准备type3以在下次选择时刷新其数据。

  3. 端点和会话变量用于ID交换。

    //JavaScript code
    //Definition of listener function for type1 combo
    var handleType1Change = function() {
    
      //Type3 value is no longer valid
      type3Combo.clearValue();
    
      //Setting lastQuer to null will force data refresh for type3 combo
      //next time it gets selected.
      type3Combo.lastQuery = null;
    
      //Call endpoint to define session variable with ID of type1 combo
      this.selectType1({type1_id: type1Combo.value});
    };
    
    #Ruby code
    #The endpoint is called from handleType1Chnage listener to
    #set session variable with selected ID in type1 combo.
    endpoint :select_type1 do |params, this|
      component_session[:type1_id] = params[:type1_id]
    end
    
  4. 这是我对植物形式的完整代码:

    class PlantForm< Netzke::Basepack::Form
      def configure(c)
        super
        c.model = 'Plant'
        c.title = 'Plant'
        c.items = [
          {
            field_label: 'Type1',
            xtype: :combo,
            store: Type1.select([:id, :name]).map { |x| [x.id, x.name] },
            id: 'type1Combo',
            #Sets the value for type1 in case change form is opened
            value: record && record.id ? record.type3.type1_id : nil
          },
          {
            field_label: 'Type2',
            xtype: :combo,
            store: Type2.select([:id, :name]).map { |x| [x.id, x.name] },
            id: 'type2Combo',
            #Sets the value for type2 in case change form is opened
            value: record && record.id ? record.type3.type2_id : nil
          },
          { 
            field_label: 'Type3', 
            name: :type3__name,
            id: 'type3Combo',
            data_store: {auto_load: false},
            scope: {type1_id: component_session[:type1_id],
                    type2_id: component_session[:type2_id]}
          },
          { field_label: 'Name', name: :name }
        ]
      end
    
      js_configure do |c|
        c.init_component = <<-JS
          function() {
            this.callParent();
    
            var type1Combo = this.getComponent('type1Combo');
            var type2Combo = this.getComponent('type2Combo');
            var type3Combo = this.getComponent('type3Combo');
    
            var handleType1Change = function() {
              type3Combo.clearValue();
              type3Combo.lastQuery = null; //force data refresh in type3 combo
              this.selectType1({type1_id: type1Combo.value});
            };
    
            var handleType2Change = function() {
              type3Combo.clearValue();
              type3Combo.lastQuery = null;
              this.selectType2({type2_id: type2Combo.value});
            };
    
            type1Combo.addListener('select', handleType1Change, this);
            type2Combo.addListener('select', handleType2Change, this);
          }
        JS
      end
    
      endpoint :select_type1 do |params, this|
        component_session[:type1_id] = params[:type1_id]
      end
    
      endpoint :select_type2 do |params, this|
        component_session[:type2_id] = params[:type2_id]
      end
    
    end