首页
所有分类
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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
Sep 01 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 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
Centos(8) 伪静态(1) 组策略(1) Rewrite(4) Windows server 2012(17) destoon(1) lnmp(1) 跨域(4)  AD域(1) lamp(1)
You might like
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
告诉大家什么是JSON
2008/06/10 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
日期处理的js库（迷你版）--自建js库总结
2011/11/21 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
理解python多线程（python多线程简明教程）
2014/06/09 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
舒适的豪华鞋：Taryn Rose
2018/05/03 全球购物
C#面试常见问题
2013/02/25 面试题
自我评价怎么写好呢？
2013/12/05 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript