(翻译)设计Qt风格的C++的应用程序接口[转]

<script type="text/javascript">
Ext.onReady(function() {
var tree = Ext.create('Ext.tree.Panel', {
title : '树面板简单示例',//标题
width : 200,
height : 500,
rootVisible: true,//是否显示root
renderTo : Ext.getBody(),
root :
{
text : '树根',//节点名称
expanded : true,//默认展开根节点
//创建子节点
children :
[
//第一个子节点
{
text : '节点1',//节点名称
leaf : false,//说明不是叶子节点，可以加子节点
children :
{
text : '节点1',//节点名称
leaf : true,//说明为叶子节点，后面不再有子节点
}
},
//第二个子节点
{
text : '节点2',//节点名称
leaf : true,//说明为叶子节点
}
]
}
});
});
</script>

<script type="text/javascript">
Ext.onReady(function() {
var tree = Ext.create('Ext.tree.Panel', {
title : '树面板简单示例',//标题
width : 300,
height : 500,
rootVisible: true,//是否显示root
fields : ['text','description'],
columns :
[
{
xtype: 'treecolumn',//树状表格列
text: '名称',
dataIndex: 'text',   //设置显示的名称
width: 150,
sortable: true
},
{
text: '描述',
dataIndex: 'description',
flex: 1,
sortable: true
}
],
renderTo : Ext.getBody(),
root :
{
text : '树根',//节点名称
description : '根目录',
expanded : true,//默认展开根节点
//创建子节点
children :
[
//第一个子节点
{
text : '节点1',//节点名称
description : '第一个节点',
leaf : false,//说明不是叶子节点，可以加子节点
children :
{
text : '节点1的节点',//节点名称
description : '第一个节点的节点',
leaf : true,//说明为叶子节点，后面不再有子节点
}
},
//第二个子节点
{
text : '节点2',//节点名称
description : '第二个节点',
leaf : true,//说明为叶子节点
}
]
}
});
});
</script>