ExtJs Bindung mit Konvertern (Formeln)

Question

Ich whont in Binding zu verwenden, wenn es so etwas wie WPF Konverter möglich ist. In ExtJs Beispiele, die ich drei Arten sehen:

1. "{field}"
2. "Hallo {field}"
3. "{!} Feld"

Dieses Beispiel ist die Arbeit gut.

Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      { 
       xtype: 'widgetcolumn', 
       width: 50, 
       align: 'left', 
       widget: { 
        xtype: 'label', 
        bind: { 
         text: "{record.Text}", 
        } 
       } 
      }, 
     ] 
    }); 

Aber ich brauche mehr. Auf Fly ändern oder berechnen. Zum Beispiel ändern Sie den Stil des Etiketts abhängig von einigen Informationen aus dem Datensatz, oder kombinieren Sie Infomationen aus vielen Feldern. Ich will some wie folgt aus:

Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      { 
       xtype: 'widgetcolumn', 
       width: 50, 
       align: 'left', 
       widget: { 
        xtype: 'label', 
        bind: { 
         text: "{calculateText(record)}", 
         style: { 
          color: "{calculateColor(record)}" 
         } 
        } 
       } 
      }, 
     ] 
    }); 

ich Formeln lesen, und ich versuche:

Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      { 
       xtype: 'widgetcolumn', 
       width: 50, 
       align: 'left', 
       widget: { 
        xtype: 'label', 
        viewModel:{ 
         formulas: { 
          myText: function(get){ 
           return get('record').Text + '$'; 
          }, 
         } 
        }, 
        bind: { 
         text: "{myText}", 

        } 
       } 
      }, 
     ] 
    }); 

und dieses

Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      { 
       xtype: 'widgetcolumn', 
       width: 50, 
       align: 'left', 
       widget: { 
        xtype: 'label', 
        viewModel:{ 
         formulas: { 
          myText: { 
           bind: { 
            text: "{record.Text}",          
           }, 
           get: function(data){ 
            return data.text + '$'; 
           }, 

          }, 
         } 
        }, 
        bind: { 
         text: "{myText}", 

        } 
       } 
      }, 
     ] 
    }); 

Aber wenn ich versuche, meine Ansichtsmodell den aktuellen Kontext hinzufügen - Eltern ViewModel mit "record" ist los und funktioniert nicht. Was mache ich falsch und wie kann ich das machen?

Answer 1

Ich behebe mein Problem mit rowViewModel config. Beispiel:

Ext.create('Ext.grid.Panel', { 
     store: store, 
     rowViewModel: { 
      formulas: { 
       myText: function(get){ 
        return get('record.Text') + '$'; 
       }, 
      } 
     }, 
     columns: [ 
      { 
       xtype: 'widgetcolumn', 
       width: 50, 
       align: 'left', 
       widget: { 
        xtype: 'label',       
        bind: { 
         text: "{myText}", 

        } 
       } 
      }, 
     ] 
    }); 

Answer 2

Sie können ein Eltern-Viewmodel als Teil einer Viewmodel-Konfiguration übergeben.

viewModel:{ 
    parent: this.getViewModel(), 
    formulas: { 
     myText: { 
      bind: { 
       text: "{record.Text}",          
      }, 
      get: function(data){ 
       return data.text + '$'; 
      } 
     } 
    } 
}