首頁 web前端 js教程 extjs grid取到数据而不显示的解决_extjs

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

May 16, 2016 pm 06:57 PM
extjs grid 不顯示

找了快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了!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼) 手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼) Sep 23, 2022 am 09:58 AM

在前端面試中,常會問到如何使用 CSS 實現骰子/麻將佈局。以下這篇文章為大家介紹一下用CSS 創建一個 3D 骰子(Flex和Grid佈局實現3D骰子)的方法,希望對大家有幫助!

win7圖片縮圖不顯示解決方法 win7圖片縮圖不顯示解決方法 Jan 07, 2024 pm 12:45 PM

我們在查看圖片時,只需要在資料夾中就可以粗略的看到每一張圖的縮圖,從而快速瀏覽或找到需要的圖片。但是有時候會出現圖片縮圖不顯示的情況,有可能是設定或記憶體不足的問題,具體解決方法如下。 win7圖片縮圖不顯示解決方法方法一:1、先在資料夾左上角選擇“組織”,再點選“資料夾和搜尋選項”。 2、取消勾選“始終顯示圖標,從不顯示縮圖”,然後點擊確定就可以了。方法二:1.先查看自己的c盤是否還有足夠大的空間,至少1GB以上。 2.如果沒有就右鍵c盤選擇屬性,然後在「一般」中點選「磁碟清理」。 3、

u盤在我電腦裡不顯示 u盤在我電腦裡不顯示 Feb 11, 2024 pm 01:51 PM

有很多同學,在使用優盤的時候經常沒有正常的彈出,而是直接拔掉,導致盤符不顯示,下面將教給朋友們解決辦法:第一步:選擇桌面左下角win圖標,選擇倒數第二個設定選項。第二步:選擇設備選項。第三步:找到其他設備,找到優盤圖標,如果不認識別慌,在此界面不動,拔插優盤就能找到。第四步:單機優盤圖示刪除設備,重新插上優盤就會顯示盤符。如果幫助了大家請點贊,鼓勵小哥為大家解決更多的電腦問題。這是水淼·dedeCMS站群文章更新器的試用版本更新的文章,故有此標記(2023-02-0617:27:18)

了解五個常用的CSS佈局框架 了解五個常用的CSS佈局框架 Jan 16, 2024 am 09:20 AM

CSS版面框架:探索常用的五大版面框架引言:在網頁設計中,版面是至關重要的一環。而CSS佈局框架可以幫助我們快速地建立出具有不同佈局風格的網頁。本文將介紹其中的五個常用的CSS佈局框架,並提供具體的程式碼範例,以幫助讀者更好地理解和使用這些框架。一、Bootstrap:Bootstrap是目前最受歡迎的CSS佈局框架之一。它擁有豐富的組件和強大的響應式功能,可以

如何使用PHP和ExtJS實現強大Web應用功能 如何使用PHP和ExtJS實現強大Web應用功能 Jun 25, 2023 am 11:40 AM

隨著Web應用的不斷發展和普及,越來越多的企業和個人開始使用PHP和ExtJS來建立強大的網路應用程式。 PHP作為一種流行的伺服器端腳本語言,具有良好的跨平台性和易於學習的特點,而ExtJS則是一種流行的前端框架,可以幫助開發人員快速建立互動式Web應用介面。本文將介紹如何使用PHP和ExtJS實現強大Web應用功能。建立PHP和MySQL資料庫連線在使用

解決win11回收站不顯示的方法 解決win11回收站不顯示的方法 Dec 26, 2023 pm 09:47 PM

對於電腦上的無用文件和垃圾都是全部存在回收站中的,可以很多用戶在更新了win11系統之後發現自己的回收站沒了,導致無法復原需要的文件,為此我們今天專給大家帶來了win11不顯示回收站解決方法,快來一起了解一下吧。 win11不顯示回收站怎麼辦1、先在桌面空白處右鍵點選滑鼠,在彈出的選單中選擇「個人化」選項。 2、選擇後,會出現一個設定介面,在設定介面左側找到主題選項並點選。 3.點選之後,在右側往下拉,找到點選「桌面圖示設定」選項。 4.點擊後就可以看到回收站的選擇介面了。 5.勾選回收站,並點選確定即可重

CSS 自適應版面屬性優化技巧:flex 和 grid CSS 自適應版面屬性優化技巧:flex 和 grid Oct 21, 2023 am 08:03 AM

CSS自適應佈局屬性優化技巧:flex和grid在現代Web開發中,實現自適應佈局是一項非常重要的任務。隨著行動裝置的普及和螢幕尺寸的多樣化,確保網站在各種裝置上都能良好地展示,並適應不同的螢幕尺寸,是一個必不可少的要求。幸運的是,CSS提供了一些強大的屬性和技巧來實現自適應佈局。本文將重點放在兩個常用的屬性:flex和grid,並提供具體的程式碼範例

CSS 相對佈局屬性詳解:position 和 relative CSS 相對佈局屬性詳解:position 和 relative Oct 26, 2023 am 10:01 AM

CSS相對佈局屬性詳解:position和relative在前端開發中,佈局常常是開發者需要面對的問題,為了更好地控制元素在頁面中的位置,CSS提供了多種佈局方式。其中,相對佈局是一種非常常用的佈局方式,透過使用position和relative屬性,我們能夠靈活地調整元素的位置和大小。 position屬性用來定義元素的定位方式,常見的取值

See all articles