PDA

View Full Version : Ext.Window



mrhomer
30 Aug 2012, 2:14 AM
When I click to open popUp ext.window I get this message

Uncaught TypeError: Object #<HTMLHtmlElement> has no method 'createElementNS
and ext.window is shown in left bottom corner of the page whit no elementis in it.


Can someone tell me what this means and how can I fix it?

Thanks

tvanzoelen
30 Aug 2012, 3:18 AM
Can you post a small sample of your code?

mrhomer
3 Sep 2012, 5:02 AM
var proverka;

Ext.Loader.setPath('Ext.ux', baseRpcURL + 'js/Ext-4.1/ux');

Ext.Loader.setConfig({enabled: true});

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.form.*',
'Ext.state.*',
'Ext.ux.CheckColumn',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.ux.PagingToolbarResizer',
'Ext.layout.*',
'Ext.state.CookieProvider',
'Ext.ux.grid.*',
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);






//function GlobalSearchWindow() {
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
// Ext.define('SearchModel', {
// extend: 'Ext.data.Model',
// fields: ['k', 'v', 'l']
// });
// CreateWindow();

});
//}

var model = Ext.define('SearchModel', {
extend: 'Ext.data.Model',
fields: ['k', 'v', 'l']
});

Ext.require('SearchModel');

var writer = new Ext.data.JsonWriter({
type: 'json',
encode: false,
listful: true,
writeAllFields: true,
returnJson: true
});

var reader = new Ext.data.JsonReader({
root: 'search',
totalProperty: 'totalCount'
});

var proxy = new Ext.data.HttpProxy({
reader: reader,
writer: writer,
type: 'ajax',
api: {
read: baseRpcURL + 'RpcHandlers/GlobalSearchHandler.ashx?param=GetSearchResult'
},
extraParams: {
type: '',
userInfo: '',
search: ''
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}

});

var SearchStore = new Ext.data.Store({
model: model,
proxy: proxy,
remoteSort: true,
autoLoad: false,
autoSync: true,
simpleSortMode: true,
pageSize: 5
});




SearchStore.on('beforeload', function (s) {
if (Ext.getCmp('searchField').getValue().trim().length >= 3) {
var statuses =
(Ext.getCmp('C').getValue() ? 'C' : '') +
(Ext.getCmp('U').getValue() ? 'U' : '') +
(Ext.getCmp('O').getValue() ? 'O' : '') +
(Ext.getCmp('IN').getValue() ? 'I' : '') +
(Ext.getCmp('SF').getValue() ? 'S' : '') +
(Ext.getCmp('V').getValue() ? 'V' : '');
s.proxy.extraParams.search = Ext.getCmp('searchField').getValue();
s.proxy.extraParams.type = statuses;
s.proxy.extraParams.userInfo = userInfo;
} else {
alert('Type at least three characters for search!');
return false;
}
});

function GlobalSearchWindow() {
if (proverka == null) {
proverka = Ext.create('Ext.window.Window', {
title: 'Quick search',
width: 420,
height: 500,
//contentEl: 'divGlobalSearchWindow',
closable: false,
resizable: false,
//autoScroll: true,
renderTo: Ext.getBody(),
modal: true,
fbar: [{
text: 'Cancel',
listeners: {
click: function () {
proverka.hide();
}
}
}],
layout: {
type: 'vbox',
align: 'left'
},
defaults: {
margin: '0 0 5 5'
},

items: [
{
xtype: 'text',
//contentEl: 'naslov',
text: '(Use - to skip range. 11-BSU-58 will match 11BSU00000058)'
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'left'
},
defaults: {
margin: '0 10 0 0'
},
items: [
{
xtype: 'textfield',
width: 230,
//contentEl:'txtGlobalSearch',
id: 'searchField',
listeners: {
specialkey: function (field, e) {
if (e.getKey() == e.ENTER) {
if (Ext.getCmp('searchField').getValue().trim().length >= 3) {
var statuses =
(Ext.getCmp('C').getValue() ? 'C' : '') +
(Ext.getCmp('U').getValue() ? 'U' : '') +
(Ext.getCmp('O').getValue() ? 'O' : '') +
(Ext.getCmp('IN').getValue() ? 'I' : '') +
(Ext.getCmp('SF').getValue() ? 'S' : '') +
(Ext.getCmp('V').getValue() ? 'V' : '');
Ext.getCmp('SearchGrid').setVisible(true);
SearchStore.load({
params: {
search: Ext.getCmp('searchField').getValue(),
type: statuses,
start: 0,
userInfo: userInfo,
limit: 5
}
});
} else {
alert('Type at least three characters for search!');
return false;
}
}
}
}
},
{
xtype: 'button',
text: 'Search',
//applyTo: 'spanGlobalSearchButton',
scale: 'small',
width: 100,
listeners: {
click: function () {
if (Ext.getCmp('searchField').getValue().trim().length >= 3) {
var statuses =
(Ext.getCmp('C').getValue() ? 'C' : '') +
(Ext.getCmp('U').getValue() ? 'U' : '') +
(Ext.getCmp('O').getValue() ? 'O' : '') +
(Ext.getCmp('IN').getValue() ? 'I' : '') +
(Ext.getCmp('SF').getValue() ? 'S' : '') +
(Ext.getCmp('V').getValue() ? 'V' : '');
Ext.getCmp('SearchGrid').setVisible(true);
SearchStore.load({
params: {
search: Ext.getCmp('searchField').getValue(),
type: statuses,
start: 0,
userInfo: userInfo,
limit: 5
}
});
} else {
alert('Type at least three characters for search!');
return false;
}
}
}
}
]

},

{
xtype: 'fieldcontainer',
width: 420,
//contentEl:'checkBoxes',
defaultType: 'radiofield',
defaults: {
margin: '0 5 0 0'
},
layout: {
type: 'hbox'
},
items: [
{
boxLabel: 'Company',
name: 'type',
inputValue: 'C',
id: 'C',
checked: true
},
{
boxLabel: ' User',
name: 'type',
inputValue: 'U',
id: 'U'
},
{
boxLabel: ' Order',
name: 'type',
width: 50,
inputValue: 'O',
id: 'O'
},
{
boxLabel: 'Invoice',
name: 'type',
inputValue: 'I',
id: 'IN'
},
{
boxLabel: ' SF Task',
name: 'type',
width: 60,
inputValue: 'S',
id: 'SF'
},
{
boxLabel: 'VAT|Lead ID',
name: 'type',
inputValue: 'V',
id: 'V'
}
]
},
{
xtype: 'container',
width: 400,
height: 360,
layout: {
type: 'fit',
align: 'center'
},
items: [{
xtype: 'grid',
//renderTo:'divSearchGridPanel',
store: SearchStore,
id: 'SearchGrid',
// autoScroll :true,
height: 360,
hideHeaders: true,
hidden: true,
columns: [
{
width: 398,
reloadOnChange: true,
dataIndex: 'k',
sortable: true,
renderer: function (value, cell, row) {
return String.format('<a style="text-decoration: none" class="{2}" href="{1}">{0}</a>', value, CreateHyperlink(row), CreateCss(row));
}
}
],
viewConfig: {
trackOver: false,
stripeRows: false,
enableRowBody: true,
plugins: [{
ptype: 'preview',
bodyField: 'v',
expanded: true,
pluginId: 'preview'
}],
getRowClass: function (record, rowIndex, p, store) {
var statuses = (Ext.getCmp('C').getValue() ? 'C' : '') +
(Ext.getCmp('U').getValue() ? 'U' : '') +
(Ext.getCmp('O').getValue() ? 'O' : '') +
(Ext.getCmp('IN').getValue() ? 'I' : '') +
(Ext.getCmp('SF').getValue() ? 'S' : '') +
(Ext.getCmp('V').getValue() ? 'V' : '');
if (this.showPreview) {
//If we are displaying VATs/Leads, replace '&gt;' and '&lt;' to '>' and '<' respectively. < and > are converted by default in SQL with FRO XML functionality. (/&lt;/g, '<') replaces all occurances. By default it replaces just the first one.
p.body = String.format('<p style=" background-color:white; padding:3px;">{0}</p>', (statuses == 'V' || statuses == 'C') ? record.data.v.replace(/&lt;/g, '<').replace(/&gt;/g, '>') : record.data.v);
return 'x-grid3-row-expanded ';
}

return 'x-grid3-row-collapsed';
}
},
bbar: new Ext.PagingToolbar({
store: SearchStore,
pageSize: 5,
displayInfo: true,
displayMsg: '{0}-{1} of {2}',
emptyMsg: 'No topics to display',
plugins: [Ext.create('Ext.ux.PagingToolbarResizer', { options: [5, 10, 25, 50, 100, 250, 500], displayText: 'R/p' })]
})
}]
}
]



}).show();
}
proverka.show();
}


function CreateHyperlink(rowRecord) {
var statuses = (Ext.getCmp('C').getValue() ? 'C' : '') +
(Ext.getCmp('U').getValue() ? 'U' : '') +
(Ext.getCmp('O').getValue() ? 'O' : '') +
(Ext.getCmp('IN').getValue() ? 'I' : '') +
(Ext.getCmp('SF').getValue() ? 'S' : '') +
(Ext.getCmp('V').getValue() ? 'V' : '');

switch (statuses) {
case 'C':
{
if (rowRecord.data.k.indexOf('(LEAD)') != -1)
return String.format('{0}?ID={1}', vatLinkBase, ConvertBadUrlChars(rowRecord.data.l));
else
return String.format('{0}?S={1}', companyLinkBase, ConvertBadUrlChars(rowRecord.data.l));
} break;
case 'U': return String.format('{0}?S={1}', userLinkBase, ConvertBadUrlChars(rowRecord.data.l)); break;
case 'O': return String.format('{0}?ID={1}', orderLinkBase, ConvertBadUrlChars(rowRecord.data.k)); break;
case 'I': return String.format('{0}?ID={1}', invoiceLinkBase, ConvertBadUrlChars(rowRecord.data.k)); break;
case 'S': return String.format('{0}?K={1}', sfTaskLinkBase, ConvertBadUrlChars(rowRecord.data.k)); break;
case 'V':
{
return String.format('{0}?{2}={1}',
(rowRecord.data.k.match(/\(Subject\)$/) ? companyLinkBase : vatLinkBase),
ConvertBadUrlChars(rowRecord.data.l),
(rowRecord.data.k.match(/\(Subject\)$/) ? 'S' : 'ID'));
}
break;
}
}


function CreateCss(rowRecord) {
var statuses = (Ext.getCmp('C').getValue() ? 'C' : '') +
(Ext.getCmp('U').getValue() ? 'U' : '') +
(Ext.getCmp('O').getValue() ? 'O' : '') +
(Ext.getCmp('IN').getValue() ? 'I' : '') +
(Ext.getCmp('SF').getValue() ? 'S' : '') +
(Ext.getCmp('V').getValue() ? 'V' : '');
switch (statuses) {
case 'C':
{
if (rowRecord.data.v.toString().search('NOT ACTIVE') != -1)
return 'red';
else return '';
} break;
case 'U':
{
if (rowRecord.data.v.toString().search('NOT ACTIVE') != -1)
return 'red';
else return '';
} break;
case 'O': break;
case 'I': break;
case 'S': break;
case 'V': break;
default: return '';
}
}

function ConvertBadUrlChars(url) {
return url.replace(/&/g, '%26'); //replace all & chars to %26
}

//});
//}

Here is my code

scottmartin
5 Sep 2012, 10:43 AM
That sure is a lot of code to open a window ;)

This would be difficult debug as you provided.
Can you please narrow it down to a simple example that displays your problem?

I would also suggest to change you approach of using id/getCmp in your code.
This is not considered good practice and can cause many problems down the road.

Scott.