首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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了！

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
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
分析统计(1) i5 10400(1) win11(40) 速龙(1) 窗口函数(3) i7 6700(1) i5 9400(1) win10(43) ipad(1) Tomcat(18)
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php简单静态页生成过程
2008/03/27 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python的一些用法分享
2012/10/07 Python
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python argparse模块使用方法解析
2020/02/20 Python
详解Python中的编码问题（encoding与decode、str与bytes）
2020/09/30 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
韩国爱茉莉太平洋化妆品美国站：Amore Pacific US
2016/10/28 全球购物
澳大利亚领先的折扣药房：Chemist Direct（有中文站）
2018/11/24 全球购物
全球性的在线鞋类品牌：Public Desire
2019/04/03 全球购物
Elemental Herbology官网：英国美容品牌
2019/04/27 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
超市中秋节活动方案
2014/02/12 职场文书
公司联欢会策划方案
2014/05/19 职场文书
求职信范文怎么写
2015/03/19 职场文书
医院见习总结
2015/06/24 职场文书
倡议书怎么写？
2019/04/11 职场文书