ユーザーの選択に基づいて単純な JS オブジェクト配列クライアント側を構築しており、バックエンドにクエリを実行したくありません。だから私は次のようなオブジェクトを持っています:
var data = [{
id : Ext.id(),
dataIndex : 'status',
text : 'pass',
leaf : false
}, {
id : Ext.id(),
dataIndex : 'status',
text : 'pass',
leaf : false
}];
このオブジェクトを Ext.tree.Panel/Ext.data.TreeStore にロードしたいと考えています。私は 4.2.1 で MVC を使用しており、Ext.tree.Panel を定義しています。これは、包含ビューに含まれています。
データが存在し、ツリー要素が出力 HTML に存在するところまで機能させることができましたが、すべてが見えなくなりました。CSS に従って非表示にしない。表示されない理由がわかりません。これは完全に機能する例です (MVC を除くが、同じように機能します)。メモリ内の製造されたデータをツリーストア/パネルにロードする方法についてのアイデアはありますか?
<html>
<head>
<script type="text/javascript" src="./extjs-4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" type="text/css" href="./extjs-4.2.1/resources/css/ext-all.css">
<script>
/*
* http://www.sencha.com/forum/showthread.php?272679-Load-simple-JS-objects-into-a-TreeStore-and-TreePanel
*/
Ext.onReady(function () {
var store = Ext.create('Ext.data.TreeStore', {
fields : [{
name : 'dataIndex',
type : 'string'
}, {
/*
* The underlying data value as a string.
*/
name : 'text',
type : 'string'
}, {
/*
* The CSS class value if the data is usually rendered as
* an icon.
*/
name : 'iconCls',
type : 'string'
}, {
name : 'leaf',
type : 'boolean',
defaultValue : false
}]
});
var tree = Ext.create('Ext.tree.Panel', {
alias : 'widget.PivotGridTree',
title : 'Values:',
rootVisible : false,
store : store,
layout : {
type : 'vbox',
align : 'stretch'
},
plugins: [{
ptype: 'bufferedrenderer'
}],
renderTo : Ext.getBody()
});
var getData = function() {
var data = [{
id : Ext.id(),
dataIndex : 'status',
text : 'pass',
leaf : false
}, {
id : Ext.id(),
dataIndex : 'status',
text : 'pass',
leaf : false
}];
return data;
}
var root = tree.store.tree.root;
root.removeAll();
root.appendChild(getData());
});
</script>
</head>
<body></body>
</html>