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