首页
所有分类
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 相关文章推荐
通过js获取div的background-image属性
Oct 15 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
js继承实现方法详解
Dec 16 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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
FS1016(1) YB-230(1) 铁拳(1) 74HC4066(1) 死亡搁浅(1) BCLer(1) 大话西游(1) 原神(1) 模拟人生(1) AGC(1)
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP7 list() 函数修改
2021/03/09 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
JS实现横向轮播图（初级版）
2020/06/24 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python中update的基本使用方法详解
2019/07/17 Python
python自动发微信监控报警
2019/09/06 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python获取引用对象的个数方式
2019/12/20 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
聊聊python中的循环遍历
2020/09/07 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌：Tamara Mellon
2017/11/22 全球购物
BAILEY 44官网：美国制造的女性服装
2019/07/01 全球购物
党员个人剖析材料（四风问题）
2014/10/07 职场文书
辩护意见书
2015/06/04 职场文书
追悼会答谢词范文
2015/09/29 职场文书