ExtJS 4.2将树面板/树存储绑定到客户端动态JS对象数组
我正在基于用户选择构建一个简单的JS对象数组客户端,不想查询后端。所以我有一个对象,比如:ExtJS 4.2将树面板/树存储绑定到客户端动态JS对象数组,extjs,tree,store,extjs-mvc,Extjs,Tree,Store,Extjs Mvc,我正在基于用户选择构建一个简单的JS对象数组客户端,不想查询后端。所以我有一个对象,比如: var data = [{ id : Ext.id(), dataIndex : 'status', text : 'pass', leaf : false }, { id : Ext.id(), dataIndex : 'status', text : 'pass', leaf : false }
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>
/*
* http://www.sencha.com/forum/showthread.php?272679-加载-simple-JS-objects-into-a-TreeStore-and-TreePanel
*/
Ext.onReady(函数(){
var store=Ext.create('Ext.data.TreeStore'{
字段:[{
名称:“数据索引”,
键入:“字符串”
}, {
/*
*作为字符串的基础数据值。
*/
名称:“文本”,
键入:“字符串”
}, {
/*
*如果数据通常呈现为
*一个图标。
*/
名称:“iconCls”,
键入:“字符串”
}, {
名称:'叶',
类型:'布尔',
defaultValue:false
}]
});
var tree=Ext.create('Ext.tree.Panel'{
别名:“widget.PivotGridTree”,
标题:“值:”,
rootVisible:false,
店:店,,
布局:{
键入:“vbox”,
对齐:“拉伸”
},
插件:[{
p类型:“bufferedrenderer”
}],
renderTo:Ext.getBody()
});
var getData=function(){
风险值数据=[{
id:Ext.id(),
数据索引:“状态”,
文本:“通过”,
叶:错
}, {
id:Ext.id(),
数据索引:“状态”,
文本:“通过”,
叶:错
}];
返回数据;
}
var root=tree.store.tree.root;
root.removeAll();
appendChild(getData());
});
这是您的布局
选项正在破坏它。不要在树面板上设置layout
。检查样式表的路径是否正确。因此,删除layout
选项是否解决了您的问题?@rixo是的,这是我的问题。这是一个复制/粘贴/忘记考虑整件事的错误!谢谢