extjs grid取到数据而不显示的解决


Posted in Javascript onDecember 29, 2008

找了快1个小时,就是不知道错误在哪里。。。郁闷
我在鼠标左侧点击tree节点,在右侧创建一个标签页,这个已经能够实现,于是我再在新建的标签页里嵌套一个Grid。
奇怪的问题出现了。。
FF和IE下都没报错。但是Grid就是不显示。本来我以为我代码错误。于是我狂找我的代码问题,无意中关掉FF的firbug插件界面,grid就现实出来了。。。原来只要我的窗口发生任何变化Grid才会显示出来。
请问这是我代码问题还是bug?如何解决?
补充一下,我直接在TabPanel里面用items管理grid对象并没问题。但是我用添加事件后在其中管理就出问题了。
文件都是封装在类包里面的。所以只贴关键部分
这是监听事件。
Java代码
listeners:{
'click':function(node, event) {
event.stopEvent();
//把根节点的选择判断去除
if(node.text=="SamPeng" || node.text == "文章管理" || node.text == "产品管理" || node.text == "信息管理" || node.text == "来访管理"){
}else{
var n = main.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
//如果是按的文章列表,新建一个列表对象并且丢进新的标签页
if(node.text == "文章列表"){
var grid=new SamPeng.account.list();
n = main.add({
'id':node.id,
'title':node.text,
items: [{layout:"fit",items:grid}]
});}
}
main.setActiveTab(n);
}
}
listeners:{
                'click':function(node, event) {
                         event.stopEvent();
                        //把根节点的选择判断去除
                        if(node.text=="SamPeng" || node.text == "文章管理" || node.text == "产品管理" || node.text == "信息管理" || node.text == "来访管理"){
                        }else{
                            var n = main.getComponent(node.id);
                            if (!n) { //判断是否已经打开该面板
                                    //如果是按的文章列表,新建一个列表对象并且丢进新的标签页
                                if(node.text == "文章列表"){
                                    var grid=new SamPeng.account.list();
                                    n = main.add({
                                    'id':node.id,
                                    'title':node.text,
                                     items: [{layout:"fit",items:grid}]
                                });}
                            }
                         main.setActiveTab(n);
                            }
                        }
然后是我的tab面板创建类
Java代码
* Copyright(c) 2008-2010, SamPeng Inc.
*/
package("SamPeng.panel");
/**
* 作用: 用来创建中间的主显示面板
* 作者:SamPeng
* 时间:2008年9月24日1:24:42
*/
SamPeng.panel.main = function(config){
var config=config || {};
var deconfig={
renderTo:'mainlay',
width:1000,
height:561,
activeTab:0,
plain: true,
border: true,
tabPosition: 'top',
frame: true,
autoScroll: true,
enableTabScroll:true,//超过宽度就自动两边多出滚动条
items:[{
title:"首页"
}
]
}
Ext.applyIf(config,deconfig);
SamPeng.panel.main.superclass.constructor.call(this,config);
}
Ext.extend(SamPeng.panel.main,Ext.TabPanel);
* Copyright(c) 2008-2010, SamPeng Inc.
*/
package("SamPeng.panel");
/**
* 作用: 用来创建中间的主显示面板
* 作者:SamPeng
* 时间:2008年9月24日1:24:42
*/
    SamPeng.panel.main = function(config){

        var config=config || {};
        var deconfig={
                    renderTo:'mainlay',
                    width:1000,
                    height:561,
                    activeTab:0,
                    plain: true,
                    border: true,
                    tabPosition: 'top',
                    frame: true,
                    autoScroll: true,
                    enableTabScroll:true,//超过宽度就自动两边多出滚动条
                 items:[{
                                title:"首页"
                            }
                         ]            
                    }
        Ext.applyIf(config,deconfig);
        SamPeng.panel.main.superclass.constructor.call(this,config);
     }
    Ext.extend(SamPeng.panel.main,Ext.TabPanel);
Grid的就只贴数据源和属性的了。
Java代码
/*******************************************************
* 为表格建立数据源
* 链接后台,并且按每一页的数据列表返回
* 用Json数据格式传递
*******************************************************/
this.dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
});
this.dataStore.load({params:{start:0, limit:this.myPageSize}});
。。。
。。。省略很多
。。。
/*******************************************************
* 构造编辑列表面板(GridPanel)
*******************************************************/
SamPeng.account.list.superclass.constructor.call(this, {
id: 'list-account-panel',
ds: this.dataStore,
cm: art_cm,
sm: selectBoxModel,
height:500,
tbar: pagingbar,
bbar: menubar,
loadMask: {msg: '读取数据中 ...'},
enableColumnHide: false,
autoScroll:true
//region:'center'
});
Ext.extend(SamPeng.account.list, Ext.grid.GridPanel, {
reload : function() {
this.dataStore.load({params:{start:0, limit:this.myPageSize}});
},
// 调用删除数据
// 服务器通过接受参数返回删除的数据
deleteData : function (jsonData) {
this.dataStore.load({params:{start:0, limit:this.myPageSize, delData:jsonData}});
}

        /*******************************************************
        * 为表格建立数据源
        *     链接后台,并且按每一页的数据列表返回
        *    用Json数据格式传递
        *******************************************************/
        this.dataStore = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
             url: 'php/article_list.php',
             disableCaching:false
            }),

            reader: new Ext.data.JsonReader({
                root: 'results',
                totalProperty: 'total',
                id:'id'
            },[
             {name: 'id'},
             {name: 'name'},
             {name: 'typename'},
             {name: 'time'},
            ])
        });
        this.dataStore.load({params:{start:0, limit:this.myPageSize}});    
。。。
。。。省略很多
。。。
        /*******************************************************
        * 构造编辑列表面板(GridPanel)
        *******************************************************/
        SamPeng.account.list.superclass.constructor.call(this, {
                id: 'list-account-panel',
                ds: this.dataStore,
                cm: art_cm,    
                sm: selectBoxModel,
                height:500,
                tbar: pagingbar,
                bbar: menubar,
                loadMask: {msg: '读取数据中 ...'},
                enableColumnHide: false,
                autoScroll:true
                //region:'center'
        });
Ext.extend(SamPeng.account.list, Ext.grid.GridPanel, {
reload : function() {
        this.dataStore.load({params:{start:0, limit:this.myPageSize}});    
    },
// 调用删除数据
// 服务器通过接受参数返回删除的数据
deleteData : function (jsonData) {
    this.dataStore.load({params:{start:0, limit:this.myPageSize, delData:jsonData}});
}    
谢谢各位大侠了!
问题状况是我浏览器不动,Grid死活不显示,浏览器一变,Grid就出来了。而且是按照我设定的参数大小显示的。不明白倒底问题出在哪里。只有这么多分了。望指教

本来以为是代码有问题,看Firebug没有报错,并且观察Firebug确实从服务端取得了数据。搞了很久没有想出问题,但是什么也不干,把窗口最小化再最大化的时候,数据又出来了!!!
这可能是Extjs的一个Bug,从网上找类似的解决方法,找到了这个:
,后来又和qiuye402大侠进行了沟通终于搞定。

其实就是布局刷新的问题,只需将最外层的容器重新render一下就可以了。最外层的容器一般就是类似于viewport的东东了,刚开始不知道,一直重新render包含grid的panel,没有效果,重新render viewport一切OK了!

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
jquery 插件学习(三)
Aug 06 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
微信小程序实现留言功能
Oct 31 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
extjs form textfield的隐藏方法
Dec 29 #Javascript
Javascript valueOf 使用方法
Dec 28 #Javascript
Javascript typeof 用法
Dec 28 #Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 #Javascript
JS option location 页面跳转实现代码
Dec 27 #Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 #Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 #Javascript
You might like
php实现在线通讯录功能(附源码)
2016/05/13 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
django url到views参数传递的实例
2019/07/19 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
天游软件面试
2013/11/23 面试题
中学教师教育感言
2014/02/21 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js