how to send id instead of title

netzke_columns

class SchedulePanel < Netzke::Basepack::BorderLayoutPanel
  js_property :header, false
  def configuration
    school_id = super[:school_id] || component_session[:selected_school_id].to_i
    component_session[:selected_school_id] = school_id
    subjects_store = Subject.order(:title).all.collect {|c|[c.id,c.title]}
    school = School.find(school_id)
    classroom_store = school.classrooms.order(:number,:letter).collect {|c|[c.id,c.title]}
    period_store = school.type_period.periods.order(:title).collect {|c|[c.id,c.title]}
    teacher_store = school.teachers.order(:full_name).map(&:full_name)
    current_period = school.type_period.periods.current(true).first.try(:id) || 1
    my_grids = (1..6).collect {|i|{:width=> "33%",:split=> true,:class_name => "ScheduleGrid",
      :name => "schedule_#{i}", :title => I18n.t("date.day_names")[i].mb_chars.capitalize.to_s,
      :scope => {:dow => i }, :strong_default_attrs => {:dow => i, :school_id => school_id},:auto_expand_column => 4,
      :columns => [{:name => :lesson_number, :width => 20 },
        {:name =>:subject_id, :id =>:subject_id, :header => I18n.t('activerecord.attributes.schedule.subject'),
         :renderer => "function(value){var sub_ind = this.editor.store.findExact('field1',value); if (sub_ind !=-1) {return this.editor.store.getAt(this.editor.store.findExact('field1',value)).get('field2');} else return ''}",
         :editor => {:xtype => :combo, :store => subjects_store}, :width =>130},
        {:name => :room,:width => 30 },
        {:name =>:teacher__full_name, :header => I18n.t('activerecord.attributes.schedule.teacher'),
         :editor => {:xtype => :combo, :store => teacher_store}}
      ]}
    }
    super.merge(
      :tbar => [{xtype: 'tbtext', :text => "#{I18n.t(:schedules)} - #{school.title}"}, ' ',
                {:name => :classroom, :id => :classroom, :xtype => :combo, :editable => false, :trigger_action => :all,
                 :store => classroom_store, :width => 50}, ' ',
                {:name => :period, :id => :period, :xtype => :combo, :editable => false, :trigger_action => :all,
                 :store => period_store, :value => current_period, :width => 150}
      ],
      :items => [ my_grids[0].merge({:region => :west}),my_grids[2].merge({:region => :east}),
                  my_grids[1].merge({:region => :center}).keep_if {|key| (key!=:width && key!=:split)},
        {:region=> :south, :split => true, :class_name => "Basepack::BorderLayoutPanel", :header=> false,
           :items => [ my_grids[3].merge({:region => :west}),my_grids[5].merge({:region => :east}),
                       my_grids[4].merge({:region => :center}).keep_if {|key| (key!=:width && key!=:split)}]
        }
      ]
    )
  end


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

      // setting the 'rowclick' event
      this.getTopToolbar().findById("classroom").on('select', this.onClassroomChanged, this);
      this.getTopToolbar().findById("period").on('select', this.onClassroomChanged, this);
    }
  JS

#  # Event handler this.selectTypePeriod({type_period_id: self.store.getAt(rowIndex).get('id')});
  js_method :title_callback, <<-JS
    function(r,options,success){
      var periodBoxValue = this.findParentByType("schedulepanel").getTopToolbar().findById("period").getRawValue().split(" ")[0]
      var classroomValue = this.findParentByType("schedulepanel").getTopToolbar().findById("classroom").getRawValue()
      if ((periodBoxValue) && (classroomValue) && (success)) {
        this.setTitle(this.initialConfig.title+ " "+ classroomValue+ " ("+ periodBoxValue+")")
      }
    }
  JS

#  # Event handler this.selectTypePeriod({type_period_id: self.store.getAt(rowIndex).get('id')});
  js_method :on_classroom_changed, <<-JS
    function(){
      //var periodBox = Ext.getCmp("admin_simple_app__schedule_panel").getTopToolbar().findById("period");
      var periodBoxValue = this.getTopToolbar().findById("period").getValue();
      var classroomValue = this.getTopToolbar().findById("classroom").getValue();
      if ((periodBoxValue) && (classroomValue)) {
        var arr = this.findByType("schedulegrid")
        for(var i=0,len=arr.length; value=arr[i], i<len; i++) {
          value.getStore().setBaseParam('extra_conditions', Ext.encode({classroom_id__eq: classroomValue, period_id__eq: periodBoxValue}));
          //value.getStore().load({callback: function(r,options,success){ console.debug(this,self);}, scope: this});
          value.getStore().load({callback: this.titleCallback, scope: value});
        }
      }
    }
  JS


end