extjs grid取到数据而不显示的解决_extjs
找了快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了!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



In Front-End-Interviews werden wir oft gefragt, wie man Würfel-/Mahjong-Layout mit CSS implementiert. Im folgenden Artikel erfahren Sie, wie Sie mit CSS einen 3D-Würfel erstellen (Flex- und Grid-Layout implementieren 3D-Würfel).

Wenn wir Bilder anzeigen, müssen wir nur grob die Miniaturansicht jedes Bildes im Ordner sehen, damit wir die benötigten Bilder schnell durchsuchen oder finden können. Manchmal werden jedoch keine Miniaturansichten angezeigt. Dies kann an den Einstellungen oder an unzureichendem Speicher liegen. Die spezifischen Lösungen sind wie folgt. Lösung dafür, dass Miniaturansichten von Win7-Bildern nicht angezeigt werden Methode 1: 1. Wählen Sie zunächst „Organisieren“ in der oberen linken Ecke des Ordners und klicken Sie dann auf „Ordner- und Suchoptionen“. 2. Deaktivieren Sie „Immer Symbole anzeigen, niemals Miniaturansichten“ und klicken Sie auf „OK“. Methode 2: 1. Überprüfen Sie zunächst, ob auf Ihrem Laufwerk C noch genügend Speicherplatz vorhanden ist, mindestens 1 GB oder mehr. 2. Wenn nicht, klicken Sie mit der rechten Maustaste auf das Laufwerk C, wählen Sie „Eigenschaften“ und klicken Sie dann unter „Allgemein“ auf „Datenträgerbereinigung“. 3.

Es gibt viele Schüler, die bei der Verwendung eines USB-Flash-Laufwerks oft nicht normal auftauchen, sondern es direkt abziehen, was dazu führt, dass der Laufwerksbuchstabe nicht angezeigt wird. Das Folgende zeigt Freunden die Lösung: Schritt 1: Wählen Sie das Win-Symbol unten Klicken Sie auf die linke Ecke des Desktops und wählen Sie unten die Nummer Eins aus. Zwei Einstellungsoptionen. Schritt 2: Geräteoptionen auswählen. Schritt 3: Suchen Sie nach anderen Geräten und finden Sie das USB-Flash-Laufwerk-Symbol. Wenn Sie es nicht erkennen, geraten Sie nicht in Panik. Bleiben Sie einfach auf dieser Schnittstelle und schließen Sie das USB-Flash-Laufwerk an, um es zu finden. Schritt 4: Entfernen Sie das Gerät vom Symbol des eigenständigen USB-Flash-Laufwerks und schließen Sie das USB-Flash-Laufwerk erneut an. Der Laufwerksbuchstabe wird angezeigt. Wenn es Ihnen geholfen hat, gefallen Sie mir bitte und ermutigen Sie mich, weitere Computerprobleme für Sie zu lösen. Dies ist ein Artikel, der durch die Testversion des Shuimiao·dedeCMS Station Group Article Updater aktualisiert wurde, daher trägt er diese Markierung (2023-02-0617:27:18)

Alle nutzlosen Dateien und der Müll auf dem Computer werden im Papierkorb gespeichert. Viele Benutzer stellen jedoch fest, dass ihr Papierkorb nach der Aktualisierung des Win11-Systems nicht mehr verfügbar ist. Aus diesem Grund bringen wir ihn mit Kommen Sie noch heute vorbei und finden Sie heraus, wie Sie das Problem lösen können, dass Win11 den Papierkorb nicht anzeigt. Was tun, wenn der Papierkorb in Windows 11 nicht angezeigt wird? 1. Klicken Sie zunächst mit der rechten Maustaste auf einen leeren Bereich des Desktops und wählen Sie im Popup-Menü die Option „Personalisieren“. 2. Nach der Auswahl erscheint eine Einstellungsoberfläche. Suchen Sie die Designoption auf der linken Seite der Einstellungsoberfläche und klicken Sie darauf. 3. Scrollen Sie nach dem Klicken auf der rechten Seite nach unten, um die Option „Desktop-Symboleinstellungen“ zu finden und darauf zu klicken. 4. Nach dem Klicken sehen Sie die Auswahloberfläche für den Papierkorb. 5. Überprüfen Sie den Papierkorb und klicken Sie zum Neustart auf „OK“.

CSS-Layout-Framework: Entdecken Sie die fünf häufig verwendeten Layout-Frameworks. Einführung: Im Webdesign ist das Layout ein entscheidender Teil. Das CSS-Layout-Framework kann uns dabei helfen, schnell Webseiten mit unterschiedlichen Layoutstilen zu erstellen. In diesem Artikel werden fünf häufig verwendete CSS-Layout-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, diese Frameworks besser zu verstehen und zu verwenden. 1. Bootstrap: Bootstrap ist derzeit eines der beliebtesten CSS-Layout-Frameworks. Es verfügt über umfangreiche Komponenten und leistungsstarke, reaktionsfähige Funktionen, die dies ermöglichen

Mit der kontinuierlichen Entwicklung und Beliebtheit von Webanwendungen beginnen immer mehr Unternehmen und Einzelpersonen, PHP und ExtJS zu verwenden, um leistungsstarke Webanwendungen zu erstellen. Als beliebte serverseitige Skriptsprache ist PHP plattformübergreifend und leicht zu erlernen, während ExtJS ein beliebtes Front-End-Framework ist, das Entwicklern helfen kann, schnell interaktive Webanwendungsschnittstellen zu erstellen. In diesem Artikel wird erläutert, wie Sie mit PHP und ExtJS leistungsstarke Webanwendungsfunktionen implementieren. Stellen Sie PHP- und MySQL-Datenbankverbindungen zur Nutzung her

Ausführliche Erläuterung der relativen CSS-Layouteigenschaften: Position und Relative. In der Frontend-Entwicklung ist das Layout häufig ein Problem, mit dem sich Entwickler auseinandersetzen müssen. Um die Position von Elementen auf der Seite besser steuern zu können, bietet CSS verschiedene Layoutmethoden. Unter diesen ist das relative Layout eine sehr verbreitete Layoutmethode. Mithilfe der Positions- und Relativattribute können wir die Position und Größe von Elementen flexibel anpassen. Das Positionsattribut wird verwendet, um die Positionierungsmethode des Elements zu definieren

Eigenschaften des CSS-Panel-Layouts: Raster und Grid-Template-Columns Im modernen Webseiten-Layout ist das Panel-Layout eine gängige Designmethode, mit der Webinhalte in einem Raster angeordnet werden können. Das Grid-Layout-Attribut in CSS und das Grid-Template-Columns-Attribut sind die Schlüssel zur Realisierung des Panel-Layouts. 1. Einführung in das Rasterlayout-Attribut Das Rasterlayout-Attribut ist ein Attribut, das zum Erstellen eines Rasterlayouts in CSS durch Konvertieren von HTML verwendet wird
