|
|
我在鼠標(biāo)左側(cè)點(diǎn)擊tree節(jié)點(diǎn)，在右側(cè)創(chuàng)建一個(gè)標(biāo)簽頁(yè)，這個(gè)已經(jīng)能夠?qū)崿F(xiàn)，于是我再在新建的標(biāo)簽頁(yè)里嵌套一個(gè)Grid。
奇怪的問(wèn)題出現(xiàn)了。。
FF和IE下都沒(méi)報(bào)錯(cuò)。但是Grid就是不顯示。本來(lái)我以為我代碼錯(cuò)誤。于是我狂找我的代碼問(wèn)題，無(wú)意中關(guān)掉FF的firbug插件界面，grid就現(xiàn)實(shí)出來(lái)了。。。原來(lái)只要我的窗口發(fā)生任何變化Grid才會(huì)顯示出來(lái)。
請(qǐng)問(wèn)這是我代碼問(wèn)題還是bug？如何解決？
補(bǔ)充一下，我直接在TabPanel里面用items管理grid對(duì)象并沒(méi)問(wèn)題。但是我用添加事件后在其中管理就出問(wèn)題了。
文件都是封裝在類(lèi)包里面的。所以只貼關(guān)鍵部分
這是監(jiān)聽(tīng)事件。
Java代碼
listeners:{
'click':function(node, event) {
event.stopEvent();
//把根節(jié)點(diǎn)的選擇判斷去除
if(node.text=="SamPeng" || node.text == "文章管理" || node.text == "產(chǎn)品管理" || node.text == "信息管理" || node.text == "來(lái)訪管理"){
}else{
var n = main.getComponent(node.id);
if (!n) { //判斷是否已經(jīng)打開(kāi)該面板
//如果是按的文章列表，新建一個(gè)列表對(duì)象并且丟進(jìn)新的標(biāo)簽頁(yè)
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();
//把根節(jié)點(diǎn)的選擇判斷去除
if(node.text=="SamPeng" || node.text == "文章管理" || node.text == "產(chǎn)品管理" || node.text == "信息管理" || node.text == "來(lái)訪管理"){
}else{
var n = main.getComponent(node.id);
if (!n) { //判斷是否已經(jīng)打開(kāi)該面板
//如果是按的文章列表，新建一個(gè)列表對(duì)象并且丟進(jìn)新的標(biāo)簽頁(yè)
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面板創(chuàng)建類(lèi)
Java代碼
* Copyright(c) 2008-2010, SamPeng Inc.
*/
package("SamPeng.panel");
/**
* 作用: 用來(lái)創(chuàng)建中間的主顯示面板
* 作者：SamPeng
* 時(shí)間：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,//超過(guò)寬度就自動(dòng)兩邊多出滾動(dòng)條
items:[{
title:"首頁(yè)"
}
]
}
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");
/**
* 作用: 用來(lái)創(chuàng)建中間的主顯示面板
* 作者：SamPeng
* 時(shí)間：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,//超過(guò)寬度就自動(dòng)兩邊多出滾動(dòng)條
items:[{
title:"首頁(yè)"
}
]
}
Ext.applyIf(config,deconfig);
SamPeng.panel.main.superclass.constructor.call(this,config);
}
Ext.extend(SamPeng.panel.main,Ext.TabPanel);
Grid的就只貼數(shù)據(jù)源和屬性的了。
Java代碼
/*******************************************************
* 為表格建立數(shù)據(jù)源
* 鏈接后臺(tái)，并且按每一頁(yè)的數(shù)據(jù)列表返回
* 用Json數(shù)據(jù)格式傳遞
*******************************************************/
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}});
。。。
。。。省略很多
。。。
/*******************************************************
* 構(gòu)造編輯列表面板（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: '讀取數(shù)據(jù)中 ...'},
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}});
},
// 調(diào)用刪除數(shù)據(jù)
// 服務(wù)器通過(guò)接受參數(shù)返回刪除的數(shù)據(jù)
deleteData : function (jsonData) {
this.dataStore.load({params:{start:0, limit:this.myPageSize, delData:jsonData}});
}
/*******************************************************
* 為表格建立數(shù)據(jù)源
* 鏈接后臺(tái)，并且按每一頁(yè)的數(shù)據(jù)列表返回
* 用Json數(shù)據(jù)格式傳遞
*******************************************************/
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}});
。。。
。。。省略很多
。。。
/*******************************************************
* 構(gòu)造編輯列表面板（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: '讀取數(shù)據(jù)中 ...'},
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}});
},
// 調(diào)用刪除數(shù)據(jù)
// 服務(wù)器通過(guò)接受參數(shù)返回刪除的數(shù)據(jù)
deleteData : function (jsonData) {
this.dataStore.load({params:{start:0, limit:this.myPageSize, delData:jsonData}});
}
謝謝各位大俠了！
問(wèn)題狀況是我瀏覽器不動(dòng)，Grid死活不顯示，瀏覽器一變，Grid就出來(lái)了。而且是按照我設(shè)定的參數(shù)大小顯示的。不明白倒底問(wèn)題出在哪里。只有這么多分了。望指教
本來(lái)以為是代碼有問(wèn)題，看Firebug沒(méi)有報(bào)錯(cuò)，并且觀察Firebug確實(shí)從服務(wù)端取得了數(shù)據(jù)。搞了很久沒(méi)有想出問(wèn)題，但是什么也不干，把窗口最小化再最大化的時(shí)候，數(shù)據(jù)又出來(lái)了！！！
這可能是Extjs的一個(gè)Bug，從網(wǎng)上找類(lèi)似的解決方法，找到了這個(gè)：
，后來(lái)又和qiuye402大俠進(jìn)行了溝通終于搞定。
其實(shí)就是布局刷新的問(wèn)題，只需將最外層的容器重新render一下就可以了。最外層的容器一般就是類(lèi)似于viewport的東東了，剛開(kāi)始不知道，一直重新render包含grid的panel，沒(méi)有效果，重新render viewport一切OK了！
JavaScript技術(shù)：extjs grid取到數(shù)據(jù)而不顯示的解決，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
