2016-08-25 5 views
1

extjs 6.0.2アプリケーションの現代的なエリアで単純なリストの例を作成していますが、モデル、ストア、およびビューを作成しました。ストアをリストコンポーネントに割り当てた後は、ビューには何も表示されませんが、Senchaのドキュメントの指示に従っています。Store Extjsで表示するデータをバインドしない6 modern

モデル=> Task.js

Ext.define('NewsApp.model.Task', { 
extend: 'Ext.data.Model', 
xtype:'Task', 

fields: [ 
    { name: 'label',  type: 'string' }, 
    { name: 'done',  type: 'boolean', defaultValue:false } 
]}); 

ストア=> Tasks.js

Ext.define('NewsApp.store.Tasks', { 
extend: 'Ext.data.Store', 

requires:[ 
    'NewsApp.model.Task' 
], 

alias: 'store.tasks', 

model: 'NewsApp.model.Task', 

data : [ 
    {label: 'Make the bed'}, 
    {label: 'Go to Masjed'}, 
    {label: 'Take out the trash'}, 
    {label: 'Take Kids out'}, 
    {label: 'Go shopping'} 
]}); 

ビュー=> iはまた、中に警告を気づい

Ext.define('NewsApp.view.about.About', { 
extend: 'Ext.Panel', 

requires: [ 
    'NewsApp.view.about.AboutController', 
    'NewsApp.store.MobileOS', 
    'Ext.dataview.List', 
    'NewsApp.store.Tasks' 
], 
xtype: 'About', 
controller: 'about', 
fullscreen: true, 
layout: 'vbox', 
items: [ 
    { 
     xtype: 'list', 
     itemTpl: '<div class="todo-item">{label}</div>', 
     store: 'NewsApp.store.Tasks', 
     items: [] 
    } 
]}); 

をabout.js実行中のコンソール

指定されたストアは

を見つけることができないと私は、リストの設定で正しく店舗名を書いたと確信しています[WARN]。

答えて

2

Store configが文字列(クラス名)にすることはできません、あなたはそれを作成する必要があります:あなたは間違ってやっている

// ... 
xtype: 'list', 
store: Ext.create('NewsApp.store.Tasks'), 
// ... 
1

まず最初はNewsApp.store.Tasksで店を呼んでいます。これは許されず、その結果、あなたはエラーを起こす。グリッドにストアを実現する方法はたくさんあります。私が示唆する方法の1つは、IDを使用して呼び出すことです。 ストアにIDを割り当てます。

グリッドでこのID読み取りストアを使用します。

store : NewTask

よりよく理解するために、このリンクをお読みください。これにより、コードを設計するのに役立ちます。 Alias

ご提案は大歓迎です。

+0

が動作し、まだ何も表示されません。同じ警告を得る! –

+0

私は答えを正当化するためのリンクを与えたので、正確に何が欠けているのは確かですが、これは店をフェッチする方法の1つです。私は詳細を取得した場合あなたに戻ってきます。 – UDID

0

ストアがロードされていますか? ViewModelsを使用していますか?もしそうなら、あなたのviewmodelで、あなたが店(秒)を設定することができます。このaproachで

stores: { 
    task: { 
     //Store reference 
     type: 'tasks', 

     //Auto load 
     autoLoad: true 
    } 
} 

を、あなたも視野にお店をバインドすることができます。

bind: {store: 'task'} 
関連する問題