如何自定义一个 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 endend?