0
ExtJs를 사용하고 있습니다. 4.1.1 내 화면에 AJAX 호출을 통해로드되는 여러 구성 요소가 있습니다. 이러한 구성 요소는 페이지로드시 표시되어야합니다. 그러나 대신 빈 화면이 나타납니다.ExtJS 구성 요소가로드되었지만 화면에 표시되지 않습니다.
화면을 표시하는 데 ExtJS 탭을 사용하고 있습니다. 이제 이상한 일이 내 크롬 개발자에 하나의 오류를하지 얻고있다
<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);
}
:
JSP : 다음은 코드입니다. 또한 크롬 개발자의 네트워크 탭을 확인할 때 모든 상점이 완벽하게 올바르게로드되는 것을 볼 수 있습니다.
여기에 문제가 될 수있는 사항을 제안하십시오.
이 구성 요소를 인스턴스화하는 데 사용하는 코드는 무엇입니까? – rixo