ExtJs Liaison avec des convertisseurs (formules)

Question

Je veux utiliser dans la liaison s'il est possible quelque chose comme les convertisseurs WPF. Dans les exemples ExtJs je vois trois types:

1. "{champ}"
2. "Bonjour {champ}"
3. "{!} Champ"

Cet exemple est excellent travail.

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

Mais j'ai besoin de plus. À la volée, changez quelque chose ou calculez. Par exemple, changer le style de l'étiquette en fonction de certaines informations de l'enregistrement ou de fomatting et en combinant l'information de nombreux champs. Je veux somethink comme ceci:

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

je lis sur les formules et j'essaie:

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}", 

        } 
       } 
      }, 
     ] 
    }); 

et ce

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}", 

        } 
       } 
      }, 
     ] 
    }); 

Mais lorsque je tente d'ajouter mon ViewModel au contexte actuel - parent ViewModel avec "record" est lâche et ne fonctionne pas. Qu'est-ce que je fais mal et comment puis-je faire cela?

Answer 1

Je résous mon problème en utilisant la config rowViewModel. Exemple:

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

Vous pouvez transmettre un modèle de vue parent dans le cadre d'une configuration viewmodel.

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