Ext.list.Tree商店和模板

例如，與Touch 2.4 Ext.List相比，Ext JS 6列表不再存在。所以我現在要做的就是創建一個樹庫並將其綁定到Ext.list.Tree。這似乎工作正常，但我不知道如何設置列表項目上的模板。我有以下代碼：Ext.list.Tree商店和模板

我的模型看起來是這樣的：

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name', type: 'string'}, 
     {name: 'phoneNumber', type: 'string'} 
    ] 
});

接下來我有一些數據：

var data = { 
    users: [ 
     { 
      name: 'Ed Spencer', 
      phoneNumber: '555 1234' 
     }, 
     { 
      name: 'Abe Elias', 
      phoneNumber: '666 1234' 
     } 
    ] 
};

其次是商店的定義：

var store = Ext.create('Ext.data.TreeStore', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    expanded: true, 
    defaultRootProperty: 'users', 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'users' 
     } 
    } 
});

最後但並非最不重要的一點，我將商店綁定到我的treelist：

var list = Ext.create('Ext.list.Tree', { 
    title: 'simple list', 
    store: store, 
    width: '200px', 
    height: '400px', 
    renderTo: Ext.getBody(), 
    itemTpl: '{name}' 
});

通過查看文檔，它看起來像我需要指定一個文本屬性，然後可能自動顯示在列表中，但我不想只顯示文本，我想使名稱和電話號碼的組合在這個例子中。

我不知道如何繼續現在，因爲我不知道如何顯示我的數據在列表/樹。希望有人能幫助。我也有一個Sencha小提琴在這裏可用：https://fiddle.sencha.com/#fiddle/1el1

來源

2016-08-03 zwik

你的小提琴似乎並不奏效。我只看到一個空白的200x400像素矩形。 –

@SumnerEvans：沒錯，那是問題的一部分;）。我現在更新了小提琴。我發現還有Ext.dataview.List，它似乎更適合我的需求。雖然它似乎沒有正確填寫...... – zwik

解決方案是不使用Ext.list.Tree，而是使用Ext.List/Ext.dataview.List。我正在查看經典文檔，而我應該查看現代文檔。

我現在有以下商店：

var store = Ext.create('Ext.data.Store', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'users' 
     } 
    } 
});

並呈現以下列表：

// don't render the list, but add it to the viewport instead 
Ext.Viewport.add(Ext.create('Ext.List', { 
    title: 'simple list', 
     store: store, 
     itemTpl: '{name}, {phoneNumber}' 
}));

的模型和數據保持不變。

我還更新了小提琴，所以它會正確顯示：https://fiddle.sencha.com/#fiddle/1el1

來源

2016-08-04 07:54:15 zwik

Ext.list.Tree商店和模板

回答

相關問題