حقول منطقية مكسورة في تحويلة أو ext_scaffold؟

Question

أقوم بتجربة استخدام ext_scaffold لتوليد عناصر واجهة المستخدم لتطبيق الويب المدعوم من القضبان.

ومع ذلك، أعاني من قضايا مع سلوك الحقول المنطقية. على سبيل المثال، عندما أفعل

./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".)

بعد اللعب حول هذا القليل، اتضح ما إذا كنا في الحقل المخفية أعلى من مربع الاختيار، بغض النظر عما يتم تعيين الحقل الآن إلى True بعد التحرير. ليس بالضبط السلوك المطلوب أيضا.

هل شهد أي شخص آخر هذه المشكلة؟ هل يوجد اى اعمال فى الجوار؟ شكرا.

تحديث:

لاحظ أنه حتى مع خانة الاختيار المحددة للحقل، يشير طلب المشاركة المرسلة إلى تعيين الحقل إلى FALSE. يتم تحديث جميع أنواع الحقول الأخرى بشكل مناسب ...

تحديث 2:

حسنا، وجدت كبيرة وظيفة مدونة تصف محلول نصف الدائم لهذه المشكلة, ، لكنني ما زلت غير قادر تماما على تحقيق ذلك ... لقد قمت بتكييف حلاه على النحو التالي:

   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);  
   },

الآن يتم إلقاء التنبيه بشكل صحيح، مما يشير إلى الحقل الصحيح وتأكيد سيتم تعيينه إلى الصفر.

باستثناء ذلك، لا يحدث ذلك في طلب النشر الذي يتم إرساله بالفعل - في الواقع، إذا لم يتم التحقق من مربع الاختيار، فلن يكون له قيمة في المنشور على الإطلاق.

هل يمكن لشخص ما أن يساعدني في فهم ما يحدث هنا؟

Answer 1

حسنا، اتضح أن هذا خطأ معروف مع إطار تحويلة. يهيمون على وجوههم إلى منتديات 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;
}

أخيرا، قد ترغب في إصلاح Scafolded لإنشاء هذه XCHECKESS الجديدة من أجل المنطاقين وكذلك عدم إنشاء الحقل المخفي. قمت بتعديل 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")
%>
    ],

آمل أن يساعد هذا أي شخص آخر يكافح مع هذا!