ext 또는 ext_scaffold가 부러진 부울 필드?

Question

ext_scaffold를 사용하여 Rails 지원 웹 애플리케이션에 대한 UI 요소를 생성하는 것을 실험하고 있습니다.

그러나 부울 분야의 행동에 문제가 있습니다. 예를 들어, 내가 할 때

./script/generate ext_scaffold product name:string description:text sku:integer available:boolean

마이그레이션을 올바르게 구축하고 부울 필드에 대한 확인란으로 사용자 인터페이스를 생성합니다.

그러나이 상자를 확인하면 객체가 생성되는 경우에만 수정됩니다. 레코드가 이미 존재하면 확인란의 상태가 필드를 정확하게 반영합니다. 그러나 편집에 실패한 것 (즉, 확인하거나 확인 해제하고 레코드를 저장해도 변경되지는 않습니다.

코드에 담그면 다음을 발견합니다.

 items: [
    { fieldLabel: scaffoldPanel.labels['product[name]'], name: 'product[name]', xtype: 'textfield' },
    // ... other fields ...
    { fieldLabel: scaffoldPanel.labels['product[available]'], name: 'product[available]', xtype: 'checkbox', inputValue: '1' }, { xtype: 'hidden', name: 'product[available]', value: '0' }
    ],

문제는 레일이나 내선이 동일하게 이름이 지정된 요소에서 혼란스러워한다는 것입니다. 어느 쪽이든, 레코드가 만들어진 후에 확인란을 클릭하면 아무것도하지 않습니다 (확인되거나 확인되지 않은 경우 필드는 '0'이 남아 있습니다.)

이것으로 약간의 재생 후, 우리가 숨겨진 필드를 확인란 위에 배치하는지, 편집 후 필드가 무엇인지에 상관없이 그것이 진짜로 설정되면 나타납니다. 정확히 원하는 행동도 아닙니다.

다른 사람 이이 문제를 경험 했습니까? 해결 방법이 있습니까? 감사.

업데이트:

필드 확인 된 확인란이 확인하더라도 전송 된 게시물 요청은 필드가 False로 설정되었음을 나타냅니다. 다른 모든 필드 유형이 적절하게 업데이트되고 있습니다 ...

Update2 :

좋아, 위대한 것을 발견했다 이 문제에 대한 Salgence의 해결책을 설명하는 블로그 게시물, 그러나 나는 여전히 이것을 작동시킬 수 없다 ... 나는 그의 솔루션을 다음과 같이 조정했다.

   onOk: function() { 

      // ....

      if (scaffoldPanel.getFormPanel().currentMode == 'edit') {
        // set up request for Rails create action
        submitOptions.params._method = 'PUT';
        submitOptions.url = submitOptions.url + '/' + selected.data.id;
      }

  // ----- checkbox serializer ------
     var serializedForm = scaffoldPanel.getFormPanel().getForm();

 // because unchecked checkboxes do not submit values, manually force a value of 0  
     serializedForm.items.each(function(f) {  
        //alert("Checking \"" + f.getName() "\" field...");
        if (f.isFormField && f.getXType() == 'checkbox' && !f.getValue()) {  
            alert("Auto setting \"" + f.getName() + "\" field to 0...");
            serializedForm.getValues()[f.getName()] = '0';  
        }
      });
// ------- end serializer -------

     serializedForm.submit(submitOptions);
     //scaffoldPanel.getFormPanel().getForm().submit(submitOptions);  
   },

이제 경고가 제대로 던져져 올바른 필드를 나타내고 0으로 설정 될 것이라고 주장합니다.

실제로 전송되는 게시물 요청에서 발생하지 않는 경우를 제외하고는 실제로 확인란이 확인되지 않은 경우 게시물에 전혀 값이 없습니다.

누군가 내가 여기서 무슨 일이 일어나고 있는지 이해하도록 도와 줄 수 있습니까?

Answer 1

좋아, 이것은 Ext 프레임 워크가있는 알려진 버그입니다. EXTJS 포럼으로 돌아 다니면서 동일한 문제가있는 경우 몇 가지 솔루션이 설명되어 있습니다. 구현하기가 가장 간단한 것은 확인란 클래스를 확장하는 것입니다.

# patch.js -- include before creating any checkboxes
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
 offCls:'xcheckbox-off'
,onCls:'xcheckbox-on'
,disabledClass:'xcheckbox-disabled'
,submitOffValue:'false'
,submitOnValue:'true'
,checked:false

,onRender:function(ct) {
    // call parent
    Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

    // save tabIndex remove & re-create this.el
    var tabIndex = this.el.dom.tabIndex;
    var id = this.el.dom.id;
    this.el.remove();
    this.el = ct.createChild({tag:'input', type:'hidden', name:this.name, id:id});

    // update value of hidden field
    this.updateHidden();

    // adjust wrap class and create link with bg image to click on
    this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
    this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});

    // reposition boxLabel if any
    var boxLabel = this.wrap.down('label');
    if(boxLabel) {
        this.wrap.appendChild(boxLabel);
    }

    // support tooltip
    if(this.tooltip) {
        this.cbEl.set({qtip:this.tooltip});
    }

    // install event handlers
    this.wrap.on({click:{scope:this, fn:this.onClick, delegate:'a'}});
    this.wrap.on({keyup:{scope:this, fn:this.onClick, delegate:'a'}});

    // restore tabIndex
    this.cbEl.dom.tabIndex = tabIndex;
} // eo function onRender

,onClick:function(e) {
    if(this.disabled || this.readOnly) {
        return;
    }
    if(!e.isNavKeyPress()) {
        this.setValue(!this.checked);
    }
} // eo function onClick

,onDisable:function() {
    this.cbEl.addClass(this.disabledClass);
    this.el.dom.disabled = true;
} // eo function onDisable

,onEnable:function() {
    this.cbEl.removeClass(this.disabledClass);
    this.el.dom.disabled = false;
} // eo function onEnable

,setValue:function(val) {
    if('string' == typeof val) {
        this.checked = val === this.submitOnValue;
    }
    else {
        this.checked = !(!val);
    }

    if(this.rendered && this.cbEl) {
        this.updateHidden();
        this.cbEl.removeClass([this.offCls, this.onCls]);
        this.cbEl.addClass(this.checked ? this.onCls : this.offCls);
    }
    this.fireEvent('check', this, this.checked);

} // eo function setValue

,updateHidden:function() {
    this.el.dom.value = this.checked ? this.submitOnValue : this.submitOffValue;
} // eo function updateHidden

,getValue:function() {
    return this.checked;
} // eo function getValue

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

 // eo file 

새로운 확인란에 대한 CSS도 필요합니다.

.xcheckbox-wrap {
 line-height: 18px;
 padding-top:2px;
}
.xcheckbox-wrap a {
 display:block;
 width:16px;
 height:16px;
 float:left;
}
.x-toolbar .xcheckbox-wrap {
 padding: 0 0 2px 0;
}
.xcheckbox-on {
 background:transparent url(../javascripts/ext/resources/images/default/menu/checked.gif) no-repeat 0 0;
}
.xcheckbox-off {
 background:transparent url(../javascripts/ext/resources/images/default/menu/unchecked.gif) no-repeat 0 0;
}
.xcheckbox-disabled {
 opacity: 0.5;
 -moz-opacity: 0.5;
 filter: alpha(opacity=50);
 cursor:default;
}

마지막으로, ext-scaffold를 수정하여 부울을위한 새로운 xcheckboxes를 생성하고 숨겨진 필드를 생성하지 않을 수도 있습니다. ext_scaffold_panel.js를 다음과 같이 수정했습니다.

    baseParams: scaffoldPanel.baseParams,
    items: [
<%= attributes.inject([]) do |items, a|
 item =  "        { fieldLabel: scaffoldPanel.labels['#{class_name.demodulize.underscore}[#{a.name}]']"
 item << ", name: '#{class_name.demodulize.underscore}[#{a.name}]'"
 item << case a.field_type
   when :text_field      then [:integer, :float, :decimal].include?(a.type) ? ", xtype: 'numberfield'" : ", xtype: 'textfield'"
   when :text_area       then ", xtype: 'textarea'"
   when :date_select     then ", xtype: 'xdatefield'"
   when :datetime_select then ", xtype: 'xdatetime'"
   when :check_box       then ", xtype: 'xcheckbox', inputValue: '1' //// }, { xtype: 'hidden', name: '#{class_name.demodulize.underscore}[#{a.name}]', value: '0'"
 end
 item << " }"
 items << item
end.join(",\n")
%>
    ],

이것이 다른 사람이 이것으로 어려움을 겪는 데 도움이되기를 바랍니다!