2017-08-22 6 views
0

Ich versuche, einen Stil auf eine gebundene Formel in einem ViewModel anzuwenden.Anwenden von Stil auf die Bindungsformel

Mein Ansichtsmodell ist:

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

Und mein Hinweis auf die gebundene Formel ist:

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

Hier ist eine Fiddle von dem, was ich versuche: Bind store from a ViewModel to an xtype label with style. Ich versuche, den Schriftstil im HTML zu ändern, aber es funktioniert NICHT. Ich verwende diese als Referenz: How-to-bind-to-style-and-or-html-property

+0

Das erste, was ich sehe, ist, dass Ihre HTML zu 'firstTestStoreRecord.test' gebunden ist, aber Ihre Art ist * NICHT * gebunden' firstTestStoreRecord.style'. – Alexander

+0

Plus, ein Label hat keinen 'bodyStyle', noch hat es eine' style' Konfiguration. – Alexander

Antwort

1

Es gibt zwei Dinge, die falsch sind:

  • Ein Etikett keinen style, geschweige denn eine bodyStyle Config. Wenn Sie stylen möchten, müssen Sie Inline-HTML auf dem Etikett verwenden oder einen Container verwenden.
  • Ihre Bindung des Stils ist nicht gegen den Rekord (firstTestStoreRecord).

Korrigierte und Arbeitscode:

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

Großartig! Vielen Dank! Nun, um herauszufinden, wie man das in einem Geschäft mit einem Modell verwendet, das einen AJAX-Proxy verwendet. –

Verwandte Themen