2017-08-22 1 views
0

J'essaie d'appliquer un style à une formule liée dans un ViewModel.Application du style à la formule de liaison

Mon ViewModel est:

viewModel: { 
       formulas: { 
        firstTestStoreRecord: { 
         bind: '{testStore}', 
         get: function(testStore) { 
          return testStore.getAt(0); 
         } 
        } 
       }, 
       stores:{ 
        testStore: { 
         //fields: [{ name: 'test', type: 'string' }], 
         data: [{ 
          test: 'Foo', 
          style: { 
           'font-size': '22px', 
           'color':'red', 
          } 
         }] 
        } 
       } 
      }, 

Et ma référence à la formule est liée:

items: [{ 
       xtype: 'form', 
       title: 'Bound form', 
       flex: 1, 
       items: [{ 
        xtype: 'label', 
        bind: { 
         html: '<b>{firstTestStoreRecord.test}</b>', 
         bodyStyle: '{style}' 
        } 
       }] 
      }] 

Voici un Fiddle de ce que je suis en train: Bind store from a ViewModel to an xtype label with style. J'essaye de changer le style de police dans le html, mais cela ne fonctionne PAS. J'utilise comme référence: How-to-bind-to-style-and-or-html-property

+0

La première chose que je vois est que votre HTML est lié à 'firstTestStoreRecord.test', mais votre style est * PAS * lié à' firstTestStoreRecord.style'. – Alexander

+0

De plus, une étiquette n'a pas 'bodyStyle', ni une config' style'. – Alexander

Répondre

1

Il y a deux choses qui sont fausses:

  • Une étiquette ne dispose pas d'style, et encore moins une configuration bodyStyle. Si vous voulez styliser, vous devez utiliser le code HTML intégré sur l'étiquette ou prendre un conteneur.
  • Votre liaison du style n'est pas contre l'enregistrement (firstTestStoreRecord).

corrigée et le code de travail:

items: [{ 
    xtype: 'container', 
    bind: { 
     html: '<b>{firstTestStoreRecord.test}</b>', 
     style: '{firstTestStoreRecord.style}' 
    } 
}] 
+0

Super! Merci! Maintenant, juste pour comprendre comment utiliser cela dans un magasin avec un modèle utilisant un proxy AJAX. –