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 相关文章推荐
javascript级联下拉列表实例代码(自写)
May 10 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
理解javascript闭包
Dec 15 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
js实现筛选功能
Nov 24 Javascript
ES6中的类(Class)示例详解
Dec 09 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中的curl使用入门教程和常见用法实例
2014/04/10 PHP
Yii2如何批量添加数据
2016/05/17 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
javascript控制台详解
2015/06/25 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
使用python接入微信聊天机器人
2020/03/31 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
django有哪些好处和优点
2020/09/01 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
介绍一下RMI的基本概念
2016/12/17 面试题
员工年终演讲稿
2014/01/03 职场文书
企业文化演讲稿
2014/05/20 职场文书
项目经理任命书
2014/06/04 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
机关作风建设自查报告
2014/10/22 职场文书
会计专业自荐信范文
2015/03/05 职场文书
红色革命电影观后感
2015/06/18 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016七夕情人节感言
2015/12/09 职场文书
《正比例》教学反思
2016/02/23 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技