首页
所有分类
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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
HTA版JSMin（省略修饰语若干）基于javascript语言编写
Dec 24 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue富文本框（插入文本、图片、视频）的使用及问题小结
Aug 17 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
Switch(1) Mint UI(1) exists(2) mt-swipe(1) cmd(1) Spring JPA(1) 慢日志(1) 远程桌面(2) 相对路径 (1) REST(1)
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
抓取YAHOO股票报价的类
2009/05/15 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP7多线程搭建教程
2017/04/21 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 一些用法小结
2009/09/11 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Angular2+国际化方案（ngx-translate）的示例代码
2017/08/23 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[02:34]2016完美“圣”典风云人物：BurNIng专访
2016/12/10 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
Python获取当前路径实现代码
2017/05/08 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
详解python函数的闭包问题（内部函数与外部函数详述）
2019/05/17 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
JACK & JONES英国官方网站：欧洲领先的男装生产商
2017/09/27 全球购物
俄罗斯的精英皮具：Wittchen
2018/01/29 全球购物
实习生自我评价
2014/01/18 职场文书
美容院营销方案
2014/03/05 职场文书
环境科学专业求职信
2014/08/04 职场文书
确保工程质量承诺书
2015/04/29 职场文书