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>

...全文
241 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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.建议逐个功能调试
Edit Grid限制编辑 ExtJS 4 DirectStore post参数的变化以及应对方法 ExtJS 4 实例之数据包 ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 关于Extjs4开发笔记(二)的补充说明 在Extjs4应用中使用Ext.Loader ======================================= 11条jquery常用技巧和方法整理列表 8个超棒的学习jQuery的网站 JQuery 1.5 getJSON 的使用 JQuery AJAX提交中文乱码的解决方案 Jquery css函数用法 JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ================================= 7款强大的Javascript网格插件 Javascript 汉字编码转换 Javascript 面向对象之封装 Javascript 面向对象之构造函数的继承 Javascript 面向对象之非构造函数的继承 JavaScript对象与继承教程之内置对象(下) JavaScript对象及继承教程(上) javascript正则表达式(一) javascript正则表达式(二) JavaScript的10种跨域共享方法 JavaScript类型总览 JavaScript获取文本框光标的像素位置 js函数match、exec、test、search、replace、split使用介绍 技巧:Javascript使用隐藏的new来创建对象 禁止页面全选复制,兼容多种浏览器

81,122

社区成员

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

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