如何自定义一个 NETZKE 表格

class CustomActionGrid < Netzke::Basepack::GridPanel
  component :show_form do
        {
          :lazy_loading => true,
          :class_name => "Netzke::Basepack::GridPanel::RecordFormWindow",
          :title => "Edit #{data_class.model_name.human}",
          :button_align => "right",
          :items => [{
            :class_name => "Netzke::Basepack::FormPanel",
            :model => config[:model],
            :items => fields_for_form,
            :persistent_config => config[:persistent_config],
            :bbar => false,
            :header => false,
            :mode => config[:mode]
            # :record_id gets assigned by deliver_component at the moment of loading
          }.deep_merge(config[:edit_form_config] || {})]
        }.deep_merge(config[:edit_form_window_config] || {})
  end

  def fields_for_form
    [{:layout => :hbox,
      :label_align => :top,
      :border => false,
      :defaults => {:border => false},
      :items => [{
        :flex => 2,
        :layout => :form,
        :defaults => {:anchor => "-8"},
        :items => [
        {:xtype => 'fieldset', :title => "Basic Info", :checkboxToggle => true, :items => [
          :first_name,
          {:name => :last_name}
        ]},
        {:xtype => 'fieldset', :title => "Timestamps", :items => [
          {:name => :created_at, :disabled => true},
          {:name => :updated_at, :disabled => true}
        ]},
        :name]
      },{
        :flex => 1,
        :layout => :form,
        :defaults => {:anchor => "-8"},
        :items => [:email, :created_at, {:name => :updated_at, :xtype => :datetimefield}]
      }]}]
  end

  action :show_details, :text => "Show details", :disabled => true
  action :show_form, :text => "Show form", :disabled => true

  # For stand-alone testing
  def default_config
    super.merge(
        :model => "Clerk",
        :bbar => nil,
        :tbar => [:show_details.action, :show_form.action]
    )
  end

  # overriding 2 GridPanel's methods
  def default_bbar
    [:show_details.action, :show_form.action, "-", *super]
  end

  def default_context_menu
    [:show_details.action, :show_form.action, "-", *super]
  end

  js_method :init_component, <<-JS
    function(){
      #{js_full_class_name}.superclass.initComponent.call(this);

      this.getSelectionModel().on('selectionchange', function(selModel){
        this.actions.showDetails.setDisabled(selModel.getCount() != 1);
        this.actions.showForm.setDisabled(selModel.getCount() != 1);
      }, this);
    }
  JS

  js_method :on_show_details, <<-JS
    function(){
      var tmpl = new Ext.Template("<b>{0}</b>: {1}<br/>"), html = "";
      Ext.iterate(this.getSelectionModel().getSelected().data, function(key, value){
        html += tmpl.apply([key.humanize(), value]);
      }, this);
      html += this.getSelectionModel().getSelected().data['id']

      Ext.Msg.show({
        title: "Details",
        width: 300,
        msg: html
      });
    }
  JS

  js_method :on_show_form, <<-JS
    function(){
      var selModel = this.getSelectionModel();
      var recordId = selModel.getSelected().id;
      this.loadComponent({name: "show_form",
        params: {record_id: recordId},
        callback: function(form){
          form.on('close', function(){
            if (form.closeRes === "ok") {
              this.store.reload();
            }
          }, this);
        },scope: this});
    }

  JS

  # 利用参数改变组件的配置.
  def deliver_component_endpoint(params)
    components[:show_form][:items].first.merge!(:record_id => params[:record_id].to_i) if params[:name] == 'show_form'
    super
  end

end