0
我正在使用ExtJs 4.1.1 在我的屏幕上，我有多個組件可通過AJAX調用加載。 這些組件應該在頁面加載時顯示。 但我得到一個空白屏幕。已加載ExtJS組件但未在屏幕上顯示
我正在使用ExtJS選項卡來顯示屏幕。 下面是代碼：
JSP：
<body>
<div id="divQueryBuilder"/>
</body>
JS
Ext.define('Ext.ux.window.VisualSQLQueryBuilder', {
extend: 'Ext.panel.Panel',
id: 'VisualSQLQueryBuilderId',
renderTo: Ext.Element.get('divQueryBuilder'),
height: "100%",
width: "100%",
layout: {
type: 'border'
},
/*title: 'Visual SQL Query Builder',*/
items: [
{
xtype: 'panel',
title: 'Table Panel',
width: "23%",
height: 500,
autoScroll: true,
collapsible: true,
region: 'west',
layout: {
type: 'vbox',
align: 'center'
},
split: true,
items:[
{
xtype: 'toolbar',
border: 1,
dock: 'top',
width: '100%',
items: [{
xtype: 'textfield',
id: 'txtSearchTables',
fieldLabel: 'Search Tables:',
allowBlank: true,
listeners: {
change: function(triggerField, newValue, oldValue, eOpts){
Ext.getCmp('SQLTableTree').filterByText(newValue);
}
}
},{
xtype : 'button',
id : 'clearSearchText',
icon : 'images/remove-16x16.gif',
tooltip : 'Clear search',
handler : function() {
Ext.getCmp('txtSearchTables').setValue('');
Ext.getCmp('txtSearchTables').focus();
}
}]
},
{
xtype: 'sqltabletree',
flex: 3,
width: "100%",
split: true,
title: 'Tables',
collapsible: true,
rootVisible : false,
region : 'north'
},
{
xtype: 'sqlvirtualtabletree',
flex: 1,
width: "100%",
split: true,
title: 'Virtual Tables',
collapsible: true,
rootVisible : false,
region : 'south'
}
]
},
{
xtype: 'panel',
width: "77%",
height: '100%',
layout: 'border',
region: 'center',
items: [
//queryOutPutWindow,
{
xtype: 'panel',
border: false,
height: '100%',
layout: 'border',
region: 'north',
split: true,
items: [
{
xtype: 'sqltablepanel',
border: false,
region: 'center',
split: true,
layout: 'fit'
},
{
xtype: 'sqlfieldsgrid',
border: false,
height: '30%',
region: 'south',
split: true,
hidden: true
},
{
xtype: 'sqlattributegrid',
border: false,
region: 'south',
split: true,
hidden: true
},
{
xtype: 'sqlcriteriagrid',
border: false,
region: 'south',
split: true,
hidden: true
}
]
}
]
},
SQLResultTabPanel
],
initComponent: function() {
// create user extension namespace ux.vqbuilder
Ext.namespace('ux.vqbuilder');
// disable gutter (linenumbers) and toolbar for SyntaxHighlighter
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
ux.vqbuilder.connections = [];
ux.vqbuilder.sqlSelect = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLSelect');
// add toolbar to the dockedItems
this.dockedItems = [
{
xtype: 'toolbar',
border: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Refresh',
id: 'btnTreeRefresh',
icon: 'images/arrow_refresh.png',
handler: function() {
Ext.data.StoreManager.lookup('treeStore').load();
Ext.data.StoreManager.lookup('virtualTreeStore').load();
queryStore.load();
}
},
'-',
queryCombo,
{xtype: 'button',
text: 'Load',
id: 'btnLoad',
icon: "images/database_go.png",
visible: false,
handler: function() {
ux.vqbuilder.sqlSelect.loadQueryView();
}
},
'-',
'->',
{
xtype: 'splitbutton',
text : 'New',
id: 'btnNew',
icon: "images/application_add.png",
menu : {
items: [{
text: 'Online Report',
icon: "images/online.gif",
handler: function() {
ux.vqbuilder.sqlSelect.newQuery();
queryState = 1;
sqlQueryType = 1;
operationType = 1;
ux.vqbuilder.sqlSelect.newQueryFormSettings(queryState, sqlQueryType, 'New Online Report', null, operationType);
}
}, {
text: 'Offline Report',
icon: "images/offline.gif",
handler: function() {
ux.vqbuilder.sqlSelect.newQuery();
queryState = 2;
sqlQueryType = 1;
operationType = 1;
ux.vqbuilder.sqlSelect.newQueryFormSettings(queryState, sqlQueryType, 'New Offline Report', null, operationType);
}
}]
},
handler: function() {
ux.vqbuilder.sqlSelect.newQuery();
newQueryForm.show();
}
},
{
xtype: 'button',
text: 'Edit',
id: 'btnEdit',
icon: "images/application_edit.png",
handler: function() {
ux.vqbuilder.sqlSelect.editQuery();
}
},
{
xtype: 'button',
text: 'Delete',
id: 'btnDelete',
icon: "images/application_delete.png",
handler: function() {
ux.vqbuilder.sqlSelect.deleteQuery();
}
},
'-',
{
text: "Save",
id: 'btnSave',
icon: "images/icon-save.gif",
handler: function() {
debugger;
var finalQuery=Ext.getCmp("manualQueryEdit").getValue();
if(ux.vqbuilder.sqlSelect.fields.getCount() > 0 || operationType == 4 ||finalQuery.length>0){
loadMask.show();
ux.vqbuilder.sqlSelect.saveQuery();
loadMask.hide();
} else {
ShowExtError('No Column/Table Select.');
}
}
},
{
text: "Cancel",
id: 'btnCancel',
icon: "images/cross.png",
/*icon: "images/cancel.gif",*/
handler: function() {
Ext.getCmp('newQueryProperties').hide();
ux.vqbuilder.sqlSelect.setQueryButtons(0);
sqlOutput = '';
}
},
'-',
{
xtype: 'button',
text: "Run",
id: 'btnRun',
icon: "images/run.png",
handler: function() {
var finalQuery=Ext.getCmp("manualQueryEdit").getValue();
if(ux.vqbuilder.sqlSelect.fields.getCount() > 0 || operationType == 4 ||finalQuery.length>0)
ux.vqbuilder.sqlSelect.ShowQuery();
else {
ShowExtError('No Column/Table Select.');
}
}
}
]
},
{
xtype: 'toolbar',
dock: 'top',
id: 'newQueryProperties',
hidden: true,
items: [
'->',
{
xtype: 'label',
style: 'font-weight:bold;',
text: 'Query State: '
},
{
xtype: 'label',
id: 'newQueryStateId',
text: 'Query State'
},
'-',
{
xtype: 'label',
style: 'font-weight:bold;',
text: 'Query Type: '
},
{
xtype: 'label',
id: 'newQueryTypeId',
text: 'Query Type'
},
'-',
{
xtype: 'label',
hidden: true,
id: 'newQueryOpTypeLblId',
style: 'font-weight:bold;',
text: ' Operation Type: '
},
{
xtype: 'label',
hidden: true,
id: 'newQueryOpTypeId',
text: 'Operation Type'
},
{
xtype: 'tbseparator',
id: 'OpTypeSeparator'
},
{
xtype: 'label',
hidden: true,
id: 'newQueryAppLblId',
style: 'font-weight:bold;',
text: ' Application: '
},
{
xtype: 'label',
hidden: true,
id: 'newQueryAppId',
text: 'Application'
},
{
xtype: 'tbseparator',
id: 'AppSeparator'
},
{
xtype: 'label',
style: 'font-weight:bold;',
text: ' Query Name: '
},
{
xtype: 'label',
id: 'newQueryNameId',
text: 'Query Name'
},
'-'
]
}
];
this.callParent(arguments);
queryCombo.focus();
ux.vqbuilder.sqlSelect.setQueryButtons(0);
}
現在奇怪的是，我在我的Chrome開發者越來越不是一個單一的錯誤。 另外，當我檢查鉻開發人員的網絡選項卡時，我可以看到所有的商店正在加載得很好。
請建議這裏可能是什麼問題！
你用什麼代碼實例化這個組件？ – rixo