extjs显示不出来

yangxuebao123 2009-10-27 02:50:11
<script type="text/javascript">
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url:'__APP__/Public/test/'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'board_id'
},[
'board_id','title','is_post','add_time','add_user'
])
});
var sm = new Ext.grid.CheckboxSelectionModel();

var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'ID',width:50,sortable:true,dataIndex:'board_id'},
{header:'标题', width:300,sortable:true,dataIndex:'title'},
{header:'作者', width:150,sortable:true,dataIndex:'add_user'},
{header:'是否回复',width:100,sortable:true,dataIndex:'is_post'},
{header:'发布时间',width:200,sortable:true,dataIndex:'add_time'}
]);

var grid = new Ext.grid.GridPanel({
border:false,
buttonAlign :'left',
region:'center',
loadMask: true,
store: ds,
cm: colModel,
sm: sm,
autoScroll: true,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
})
});
/*var viewport = new Ext.Viewport({
layout:'border',
items:[grid]
});*/
ds.load({params:{start:0, limit:20, forumId: 4}});
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
//html : '__APP__/Public/treedata/',
items:[grid]
});
}
tab.setActiveTab(n);
}
}

//生成标签页
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
});

Ext.onReady(function(){
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'系统菜单',
collapsible :true,
layoutConfig:{
animate:true
},
items: [
{
title:'EXT控件使用',
border:false,
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
},{
title:'信息中心',
border:false,
//iconCls:'settings',
html:'<div id="tree" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'系统设置',
border:false,
//iconCls:'settings',
html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
}]
},
tab//初始标签页
]
});

//设置树形面板
var Tree = Ext.tree;
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'root'
});

var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
root:root,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'__APP__/Public/treedata/'
})
});

tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
tree.on('click',treeClick);

//tree2
var root2=new Ext.tree.TreeNode({
id:"root2",
text:"树的根"
});

var c1=new Ext.tree.TreeNode({
id:'c1',
icon:'img/im2.gif',
text:'信息征集'
});

var c2=new Ext.tree.TreeNode({
id:'c2',
icon:'img/im2.gif',
text:'bug征集'
});


var c22=new Ext.tree.TreeNode({
id:'c22',
icon:'img/im2.gif',
text:'实例征集'
});

var c3=new Ext.tree.TreeNode({
id:'c3',
icon:'img/im2.gif',
text:'给我留言'
});

var c4=new Ext.tree.TreeNode({
id:'c4',
icon:'img/im2.gif',
text:'留言列表'
});

var c5=new Ext.tree.TreeNode({
id:'c5',
text:'更新公告'
});

var root3=new Ext.tree.TreeNode({
id:"root3",
text:"根"
});
c1.appendChild(c2);
c1.appendChild(c22);
root2.appendChild(c1);
root2.appendChild(c3);
root2.appendChild(c4);
root3.appendChild(c5);

var tree2=new Ext.tree.TreePanel({
renderTo:"tree",
root:root2,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});

var tree3=new Ext.tree.TreePanel({
renderTo:"tree3",
root:root3,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});

//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
});
</script>

...全文
233 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
yangxuebao123 2009-10-27
  • 打赏
  • 举报
回复
老大,来回帖啊,速度。。。。
littleghosty 2009-10-27
  • 打赏
  • 举报
回复
补充一下,border布局的 region:'center',是不可缺少的部分。其他任何位置都可以缺少,唯独center是必须的。
littleghosty 2009-10-27
  • 打赏
  • 举报
回复
LZ,你这代拷贝的也太乱了,你自己看着就不累么。根本都看见你声明自己的函数,在tree的click事件你就给加了一个函数。LZ认真点,跑跑官方给的例子,一个一个弄,之后再弄复杂布局。
shang_zchao 2009-10-27
  • 打赏
  • 举报
回复
楼主
1.Ext.onReady上面的没有用是吧-_-
2.Ext.onReady下面的渲染弄的很乱
继续 建议逐个功能调试
yangxuebao123 2009-10-27
  • 打赏
  • 举报
回复
tree.render();
root.expand();

这里也有错误,我也注释掉了。
yangxuebao123 2009-10-27
  • 打赏
  • 举报
回复
报的错误太过简单,用 firebug 调试到 firebug
var tree2=new Ext.tree.TreePanel({
renderTo:"tree",
root:root2,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});
中的containerScroll: true 就 不继续向下面走了
hx_huang 2009-10-27
  • 打赏
  • 举报
回复
关注中。。。。
shang_zchao 2009-10-27
  • 打赏
  • 举报
回复
又感觉 Ext.onReady上面部分是不是没有加载
你将全部的js 放在Ext.onReady里面试试呢
shang_zchao 2009-10-27
  • 打赏
  • 举报
回复
不详细啊
1.报什么错误
2.引js包里没有?
3.只展示了js html部分定义对应的div了吗
4.建议逐个功能调试

81,092

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧