首页
所有分类
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 相关文章推荐
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
node打造微信个人号机器人的方法示例
Apr 26 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
三子棋(2) variable_scope(1) blinker(1) name_scope (1) character(1) 神经网络(7) data(4) 信号库(1) Keras(3) 字符集(1)
You might like
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
从零开始学习Node.js系列教程四：多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python中正则表达式的使用方法
2018/02/25 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
tensorflow更改变量的值实例
2018/07/30 Python
浅析python函数式编程
2020/09/26 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
linux面试题参考答案（9）
2015/01/07 面试题
入党转预备思想汇报
2014/01/07 职场文书
留学顾问岗位职责
2014/04/14 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
校长新学期寄语2016
2015/12/04 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
JavaScript函数柯里化
2021/11/07 Javascript