|
|
我在鼠標左側點擊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了！
JavaScript技術：extjs grid取到數據而不顯示的解決，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
