BooleanフィールドがExtまたはExt_scaffoldで壊れていますか？

Question

私はext_scaffoldを使って、RailsでサポートされているWebアプリケーション用の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' } 
    ], 

私が感じる問題は、Railsのかextが同じ名前の要素で混同されますか。どちらの方法でも、レコードが作成された後、チェックボックスをクリックしても何も行われません（オンまたはオフのまま、フィールドは「0」のままです）。

これで少し再生した後、編集後にフィールドが現在trueに設定されている場合でも、チェックボックスを上にしてください。正確に望む行動でもない。

誰でもこの問題が発生していますか？回避策はありますか？ありがとう。

UPDATE：

注意さえ確認フィールドのチェックボックスで、POSTリクエストが送信されていることは、フィールドがfalseに設定されていることを示します。他のすべてのフィールドタイプが適切に更新なっている...

アップデート2：私は彼のソリューションを適応してきた...

よしは、偉大なblog post describing Semergence's solution to this problemを見つけましたが、私はまだこの作業を取得するのは非常にできませんよ

ここで、アラートが正しくスローされ、正しいフィールドが示され、ゼロに設定されているとアサートされます。

これは実際に送信されるPOSTリクエストでは発生しません。実際、チェックボックスがオフの場合、POSTには値はまったくありません。

ここで何が起こっているのか誰かに教えてもらえますか？

Answer 1

OK、これは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-足場を修正することもできますがこれらの新しいxcheckboxはブール値のためのもので、隠しフィールドも生成しません。私は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") 
%> 
    ],