doLAyout does not work two time in ExtJs - layout

First this one works:
win.remove(formLogin, true);
win.add(changepswform);
win.doLayout();
Then this one does not wok:
win.add(changepswform);
win.remove(formLogin, true);
win.doLayout();
I get this error:
uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.insertBefore]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://app.localhost.com/ext-4.0.2/ext-all.js :: <TOP_LEVEL> :: line 15" data: no]
[Break On This Error] (function(){var e=this,a=Object.protot...ate("Ext.XTemplate",j,g)}return j}});
Whose fault is this? Mine? Or ExtJs has a bug?
Note:
var win = Ext.create('Ext.Window', {
title: 'Asistan Web: Online Teknik Servis Yazılımı',
width: 350,
minWidth: 350,
height: 240,
closable: false,
modal: true,
bodyStyle: 'padding:10px;',
items: [formLogin],
bbar: Ext.create('Ext.ux.StatusBar', {
id: 'win-statusbar',
defaultText: 'Giriş',
items: [
{
xtype:'splitbutton',
text:'Şifre işlemleri',
menuAlign: 'br-tr?',
menu: Ext.create('Ext.menu.Menu', {
items: [{text: LANG.LOGIN_FORGOT_PASS, handler :
function(){
if(confirm(LANG.LOGIN_MAIL_CONFIRM))doformTest(1);
Ext.getCmp('win-statusbar').setText('');
}}, {text: LANG.LOGIN_CHANGE_PASS, handler : function(){doformTest(2);}}]
})
}]
})
});

It looks like you're trying to remove a component in the second block that you've already removed in the first block. Or are you not running the two scripts sequentially?

Using true on .remove method you force garbage collection, thus removing the variable entirely AFAIK.
Edit: FOUND solution, How can I replace the content of a panel with new content?
STILL, if you want to re-use (let's say swap multiple times) your panels, you have to use false on .remove()

Related

how can i disable default menu in gojs

i'm new to gojs,
when i press my mobile's screen (#myDiagram div) in page , some default menu shows up but i don't want it.
i try to disable it by setting "toolManager.isEnable":false, but didn't work
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialAutoScale: go.Diagram.Uniform,
initialContentAlignment: go.Spot.Center,
allowDrop: false,
allowMove: false,
"toolManager.isEnable":false,
nodeSelectionAdornmentTemplate:
$(go.Adornment, "Auto",
{ layerName: "Grid" },
$(go.Placeholder)
),
layout: // use a custom layout, defined below
$(GenogramLayout, { direction: 90, layerSpacing: 30, columnSpacing: 10 })
});
how can i disable it?
here is what shows after press
As described in https://gojs.net/latest/intro/contextmenus.html#DefaultContextMenuForTouchEnabledDevices, you can just set a ContextMenuTool property to null. For example, during the initialization of a Diagram:
$(go.Diagram, . . .,
{
"contextMenuTool.defaultTouchContextMenu": null
})

dialog sapui5 oError.body display Rendering

Hi I have a dialog witch should display the content of an error in the console from a button.
Inside a UPDATE CRUD I have a dialog witch should return me an error from the console if the operation is in a certain situation.
This is my code from the error function.
function(oError){
var StringoError = JSON.parse(oError.response.body);
/*alert("Error!\n"+oError.message);*/
alert(StringoError.error.message.value);
if I use the 2 alerts it works .. but now I have to style the user experience and put the content of Error.message and StringoError.error.message.value in a dialog/popover/popup.. so I implemented like this:
var dialog = new Dialog({
title: (oError.message),
type: 'Message',
state: 'Error',
content: new Text({
text: JSON.parse(oError.response.body).error.message.value,
}),
beginButton: new sap.m.Button({
text: 'Close',
press: function () {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
});
The problem is that I get to see the title but I can't see error.message.value and the console gives me back as error:
The renderer for class sap.ui.core.Control is not defined or does not
define a render function! Rendering of __control0 will be skipped!
Should it not be sap.m.Text? Or are you using the AMD Module format? But you are using sap.m.Button in the same code...
content: new sap.m.Text({
text: JSON.parse(oError.response.body).error.message.value,
}),

OpenLayers Ext.form.ComboBox store query creates memory leak

Ack. Using OpenLayers, I have an Ext.form.ComboBox that runs a query of a Ext.data.JsonStore to access a shapefile of ~1 Gb and return a table of results. Then, a user may select one of the results and the map zooms to that location.
This works excellent. BUT! As the ComboBox is used, the JVM size continues to grow- a memory leak?- and Geoserver throws many issues mostly all related to:
Caused by: java.io.IOException: Map failed
Caused by: java.lang.OutOfMemoryError: Map failed
ERROR [geotools.map] - Call MapContent dispose() to prevent memory leaks
I can run the ComboBox as many as five times within about a minute before a storm of errors overwhelm Geoserver (e.g. GetFeatureInfo doesn't return any results, the ComboBox query comes back empty, pink tiles appear, EDIT: and GWC stops making new tiles!).
Do I need to destroy () or clear the store or...? and how? Thoughts??
GeoExt 1.1, OpenLayers 2.12.rc6, Ext 3.4, Ext 4.2.1.883, jquery-1.6, Geoserver 2.5, JDK i586 v7, Tomcat 7
code:
THE QUERY: looks up what is typed in the ComboBox & populates the Store
Ext.onReady(function() {
Ext.override(Ext.form.ComboBox, {
doQuery: function(q, forceAll) {
console.log('queryTpl', this.queryTpl, q);
q = Ext.isEmpty(q) ? '' : q;
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel: false
};
if (this.fireEvent('beforequery', qe) === false || qe.cancel) {
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if (forceAll === true || (q.length >= this.minChars)) {
if (this.lastQuery !== q) {
this.lastQuery = q;
if (this.mode == 'local') {
this.selectedIndex = -1;
if (forceAll) {
this.store.clearFilter();
} else {
this.store.filter(this.displayField, q);
}
this.onLoad();
} else {
this.store.baseParams[this.queryParam] = this.queryTpl ? String.format(this.queryTpl, q) : q;
this.store.load({
params: this.getParams(q)
});
this.expand();
}
} else {
this.selectedIndex = -1;
this.onLoad();
}
}
},
});
})
THE STORE
var dsm = new Ext.data.JsonStore({
remoteFilter: true,
autoLoad: false,
autoDestroy: true, // doesn't appear to help
url: '../geoserver/workspace', // generalized, not for public access
storeId: 'myStore2',
baseParams: {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typeName: 'MRDS_LUT', // *shp in geoserver defined by var
srsName: 'EPSG:4326',
outputFormat: 'json',
propertyName: 'SiteName,Municipal,Commodity,Status,Longitude,Latitude'
},
root: 'features',
fields: [{
name: 'SiteName',
mapping: 'properties.SiteName'
}, {
name: 'Municipal',
mapping: 'properties.Municipal'
}, {
name: 'Commodity',
mapping: 'properties.Commodity'
}, {
name: 'Status',
mapping: 'properties.Status'
}, {
name: 'Longitude',
mapping: 'properties.Longitude'
}, {
name: 'Latitude',
mapping: 'properties.Latitude'
},{
name: 'bbox',
mapping: 'properties.bbox'
}],
sortInfo: {
field: "Municipal",
direction: "ASC"
}
});
The ComboBox
var panelSiteNameSearch = new Ext.form.ComboBox({
store: dsm,
fieldLabel: "<b>Search</b>",
queryParam: "cql_filter",
queryTpl: "SiteName Like '{0}%'",
minChars: 5,
displayField: "SiteName",
valueField: "SiteName",
typeAhead: false,
loadingText: "Searching...",
width: 230,
emptyText: "Mine/Mineral Site Search",
hideTrigger: true,
tpl: '<tpl for="."><div class="search-item"><b>Site Name:</b> {SiteName}<br><b>Commodity: </b> {Commodity}<br><b>Municipality:</b> {Municipal}<br><b>Status:</b> {Status}</div><hr/></tpl>',
itemSelector: "div.search-item",
listeners: {
"select": function (combo, record) {
mrdsprimary.setVisibility(true);
mrdssecondary.setVisibility(true);
mrdstertiary.setVisibility(true);
map.setCenter(new OpenLayers.LonLat(record.data.Longitude,record.data.Latitude),13);
},
"focus": function () {
keyboardnav.deactivate();
},
"blur": function () {
keyboardnav.activate();
}
}
});
This solution is a bit nebulous. I finally prevented the out of memory errors by making sure the combined total size of all combo box stores, plus the initial Java -Xms allotment, does not exceed the Java -Xmx allotment.
For example, setting -Xms to 500m, and knowing that store #1 accesses a database of 600m and store #2 accesses a database of 800m, gives a combined total of 1900mb in my Java environment heap. If the -Xmx is set to 2g, then no errors are thrown.
In theory. I can't directly affect the Java environment's Xms without interfering (poorly) with Tomcat/Java's native GC. Knowing there is total allotted -Xmx cap, and what counts directly toward it, encourages extremely trim data stores.
Unfortunately I am limited to a 32bit JDK i586, which I read somewhere that carries an inherent 2gb limitation for -Xmx (which seems about right). The 64bit is reportedly much higher.
Findings: a remote store 'loads' an entire data store, and submits the filtered results locally... clearing the either store with removeAll or clearFilter or setValue() or NULL and/or SYNC only works locally and does not actually trigger any remote GC or reduction in the remote Java's heaping pile of unnecessary storage.
Long-term Solutions: Create a server-side PHP script that passes a given cql or some other query or ComboBox value directly to a SQL or PostGIS database, and leave javascript out of it. But I don't know how to write one yet.

Famo.us RenderController not working under SequentialLayout?

I have added a common Surface and a Scrollview (actually a FlexScrollView) to a SequentialLayout and then added the layout to my View as the following code shows:
function _createCameraView() {
var layoutViews = [];
this.cameraView = new View({
size: [undefined, this.options.footerSize]
});
var layout = new SequentialLayout({
size: [undefined, this.options.footerSize],
direction: Utility.Direction.Y
});
var backgroundSurface = new Surface({
size: [undefined, 120],
content: 'some content',
classes : ['photo-guide-content'],
properties: {
backgroundColor: 'transparent',
zIndex: 4
}
});
// detail list
var detailsList = new FlexScrollView({
layout: ListLayout,
direction: Utility.Direction.X, // set direction to horizontal
paginated: true,
//autoPipeEvents: true,
useContainer: true,
container : {
size: [undefined, 60],
properties : {
'z-index' : 5,
}
}
});
layoutViews.push(backgroundSurface);
layoutViews.push(detailsList);
layout.sequenceFrom(layoutViews);
this.cameraView.add(alignModifier).add(layout);
}
Then I've added a RenderController on another view and I'm using it to display my cameraView like this:
function _selectCamera() {
if (!this.cameraView) {
_createCameraView.call(this);
}
this.footerRender.hide(this.mapView);
this.footerRender.show(this.cameraView);
}
I know I don't need to call the hide method from the render on the function above, just the show method and it should swap the views with a smooth opacity transition, which is defined by default. Although when using this Sequential Layout I'm not getting this effect. I know it has to do with this layout because I've tried to switch the layout to a FlexibleLayout and a GridLayout, and it works fine with these two. So, my question is, why doesn't work with the SequentialLayout? I've also noticed it has a method called setOutputFunction(outputFunction), is there a way to use it so the layout uses the opacity returned from the RenderController or how can it be fixed some other way?
Try adding a getSize method to your view.
Something like this:
this.cameraView.getSize = function() {
return [undefined, undefined];
};

Ext js 3.4 window add/remove Component error

We are using extjs 3.4. The purpose is to replace a component in a Ext.Window. Even if
there is no error when we remove the old and add the new component, when trying doLayout() the error
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
occurs.
The code that creates the window is:
function createWindowConf(id, winconf, items) {
var conf = {
id: id,
title: winconf.title,
iconCls: winconf.icon,
x : winconf.xpos,
y : winconf.ypos,
width : parseInt(winconf.xsize),
height : parseInt(winconf.ysize),
layout : winconf.layout, //'border',
border : false,
resizable : winconf.resizable,
manager: windows,
shadow: false,
closable: true,
items: items
};
var win = new Ext.Window(conf);
win.render(desktopEl);
return win;
};
The items are a Ext.grid.GridPanel and a Ext.form.FormPanel.
According to user's current selection in grip (component in position 0) the old form should be removed and a new should be added (component in position 1).
The code that creates the form is:
var theConfig = {
id: config.yid,
bodyStyle: 'padding:5px 5px 0',
width: 370,
maxWidth: 370,//not resizable
minWidth: 370,
layout: 'form',
margins: '0 0 0',
region: 'east',
split: true,
colapsible : true,
trackResetOnLoad: true,
autoScroll: true,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
items: [],
buttons: [scopeDetails.updateButton, scopeDetails.submitButton]
};
this.detailsForm = new Ext.form.FormPanel(theConfig);
and the items added afterwards.
The code that updates (adds/removes) components from the window is:
this.updateWin = function(moduleForRemoveId, form, idWin) {
var win = this.getWindow(idWin);
if (win != null) {
win.remove(moduleForRemoveId);
win.add(form);
win.doLayout();
}
}
and produces the error in win.doLayout().
By removing all components and add the add the new ones:
win.removeAll();
win.add(this.grid);
win.add(this.form);
win.doLayout();
we have the same error.
Any suggestion will be really helpful since more than 3 days spent for that error
I'm pretty sure the error comes from something else rather than the component remove/add.
I created a simple testcase which defines a window with a form and a grid, and a button which replaces everything with a panel. And it works.
Your code is incomplete. You should provide a full example.
Have you tried to debug it yourself? Enable "pause on uncaught exceptions" on your Chrome script debugger the reproduce the bug. You will get a stack trace of what happened, giving you hints on what is wrong. Of course include ext-all-debug.

Resources