Ext JS - 將多個表單域綁定到模型的一個字段

Question

我有一個帶有十六進制顏色字段的模型。用戶可以通過3個單獨的編號字段將其編輯爲rgb。我試圖將這個字段綁定到這些組件，但我不知道該怎麼做。我嘗試將它們放入一個容器中並將容器綁定到現場。然而，我的setValue在數字字段發生變化時不會被調用。

我想我可以添加聽衆的號碼字段，但我希望有更好的方式去做。

https://fiddle.sencha.com/#view/editor&fiddle/23t2

Answer 1

setValue僅稱爲上的表單字段。表單字段由config isFormField: true表示。但請注意setValue不是表單字段中預期的唯一功能;有數十人（例如getValue,getModelValue，isValid，...）。因此，我總是使用hiddenfield來聚合其他表單字段，而不是container，然後我使用更改偵聽器來保持隱藏字段和其他字段同步（綁定應該也可以，但我們的應用仍然是MVC） 。我也註釋等領域與

excludeForm: true, 
submitValue: false, 

，以確保該值不提交，不影響形式的「髒」狀態。

Answer 2

試試這個代碼在你的sencha小提琴。我做了一些改變。它適用於兩種情況， 1）如果用戶從顏色名稱（文本字段）更改，那麼RGB將改變。 2）如果用戶將從數字字段更改顏色名稱（文本字段）將被更改。

可能會幫助你。

Ext.create({ 
    xtype: 'viewport', 
    renderTo: Ext.getBody(), 

    viewModel: { 
     data: { 
      theColor: { 
       name: 'Blue', 
       hex: '3366CC' 
      } 
     }, 
     formulas: { 
      containerValue: { 
       bind: '{theColor.hex}', 
       get: function (value) { 
        return { 
         hex: value 
        }; 
       }, 
       set: function (value) { 
        this.set('theColor.hex', value.hex); 
       } 
      } 
     } 
    }, 

    items: [{ 
     region: 'center', 
     xtype: 'form', 
     bodyPadding: 10, 
     height: 300, 

     fieldDefaults: { 
      labelWidth: 90, 
     }, 

     items: [{ 
      xtype: 'component', 
      width: 30, 
      height: 30, 
      bind: { 
       style: { 
        background: '#{theColor.hex}' 
       } 
      } 
     }, { 
      xtype: 'textfield', 
      fieldLabel: 'Name', 
      bind: '{theColor.name}', 
      listeners:{ 
       blur:function(textfield,e,eOpts){ 
        var viewModel = textfield.up('viewport').getViewModel(); 
         colorName = textfield.getValue(), 
         hex = colorToHex(colorName); 
        viewModel.set('theColor',{ 
        name: colorName, 
        hex: hex 
        }); 
        function colorToRGBA(color) { 
         // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255 
         // color must be a valid canvas fillStyle. This will cover most anything 
         // you'd want to use. 
         // Examples: 
         // colorToRGBA('red') # [255, 0, 0, 255] 
         // colorToRGBA('#f00') # [255, 0, 0, 255] 
         var cvs, ctx; 
         cvs = document.createElement('canvas'); 
         cvs.height = 1; 
         cvs.width = 1; 
         ctx = cvs.getContext('2d'); 
         ctx.fillStyle = color; 
         ctx.fillRect(0, 0, 1, 1); 
         return ctx.getImageData(0, 0, 1, 1).data; 
        } 

        function byteToHex(num) { 
         // Turns a number (0-255) into a 2-character hex number (00-ff) 
         return ('0'+num.toString(16)).slice(-2); 
        } 

        function colorToHex(color) { 
         // Convert any CSS color to a hex representation 
         // Examples: 
         // colorToHex('red')   # '#ff0000' 
         // colorToHex('rgb(255, 0, 0)') # '#ff0000' 
         var rgba, hex; 
         rgba = colorToRGBA(color); 
         hex = [0,1,2].map(
          function(idx) { return byteToHex(rgba[idx]); } 
          ).join(''); 
         return hex; 
        } 
       } 
      } 
     }, { 
      xtype: 'container', 

      setValue: function (value) { 
       const hex = value.hex || '000000'; 

       const red = parseInt(hex.substr(0, 2), 16); 
       const green = parseInt(hex.substr(2, 2), 16); 
       const blue = parseInt(hex.substr(4, 2), 16); 

       const items = this.query(''); 

       items[0].setValue(red); 
       items[1].setValue(green); 
       items[2].setValue(blue); 
      }, 

      bind: { 
       value: '{containerValue}', 
      }, 

      defaults: { 
       xtype: 'numberfield', 
       maxValue: 255, 
       minValue: 0, 
       allowBlank: false, 
       width: 175, 
       listeners:{ 
        change:function(numberfield){ 
         if(numberfield.hasFocus){ 
          var viewModel = numberfield.up('viewport').getViewModel(), 
           items = this.up().query(''), 
           red = items[0].getValue() || 0, 
           green = items[1].getValue() || 0, 
           blue = items[2].getValue() || 0, 
           hex = rgbToHex(red,green,blue); 
          viewModel.set('theColor',{ 
          name: hex,//For hex to color name you have to search for that, here I am giving hax color. 
          hex: hex 
          }); 
          function componentToHex(c) { 
           var hex = c.toString(16); 
           return hex.length == 1 ? "0" + hex : hex; 
          } 

          function rgbToHex(r, g, b) { 
           return componentToHex(r) + componentToHex(g) + componentToHex(b); 
          } 
         } 
        } 
       } 
      }, 

      items: [{ 
       fieldLabel: 'R', 
      }, { 
       fieldLabel: 'G', 
      }, { 
       fieldLabel: 'B', 
      }] 
     }] 
    }] 
});