Ext js 3.4 window add/remove Component error - layout

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.

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
})

How to limit visible rows in a JList in groovy

I'm building a small dialog.
I using Groovy from a gradle build script.
The dialog consists of a JList, a JTextField and a JButton.
The list is populated with names of files. There are many files so I only wanna show 5 files together with a scollbar to go thru the list.
I have tried to set visibleRowCount but it still shows all rows.
new SwingBuilder().edt {
dialog(modal: true, // Otherwise the build will continue running before you closed the dialog
title: 'Enter program name',// Dialog title
alwaysOnTop: true, // pretty much what the name says
resizable: true, // Don't allow the user to resize the dialog
locationRelativeTo: null, // Place dialog in center of the screen
pack: true, // We need to pack the dialog (so it will take the size of it's children
show: true // Let's show it
) {
vbox { // Put everything below each other
label(text: "Program Name:")
list(id:"programName", items: progNames, visibleRowCount: 8)
label(text: "Start Rule Name:")
input = textField(id: 'ruleName', text: startRuleName)
button(defaultButton: true, text: 'OK', actionPerformed: {
testProgram = programName.selectedValuesList
startRuleName = ruleName.text
dispose() // Close dialog
})
}
}
}
How can I limit the number of visible rows?
You just need to wrap the call to list in a scrollPane node, ie:
new groovy.swing.SwingBuilder().edt {
dialog(modal: true, // Otherwise the build will continue running before you closed the dialog
title: 'Enter program name',// Dialog title
alwaysOnTop: true, // pretty much what the name says
resizable: true, // Don't allow the user to resize the dialog
locationRelativeTo: null, // Place dialog in center of the screen
pack: true, // We need to pack the dialog (so it will take the size of it's children
show: true // Let's show it
) {
vbox { // Put everything below each other
label(text: "Program Name:")
scrollPane {
list(id:"programName", items: progNames, visibleRowCount: 8)
}
label(text: "Start Rule Name:")
input = textField(id: 'ruleName', text: startRuleName)
button(defaultButton: true, text: 'OK', actionPerformed: {
testProgram = programName.selectedValuesList
startRuleName = ruleName.text
dispose() // Close dialog
})
}
}
}

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];
};

doLAyout does not work two time in ExtJs

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()

How to put a Dojox.grid in a dijit.Dialog

I've read through the posts about dojox.Grid here, including the one about the tabcontainer, but it doesn't seem to solve my problem.
I have a grid that I am adding programmatically which works a treat if the grid is in the "main" markup, but ceases to display if I put the grid in a dialog.
Any ideas as to why? Using dojo 1.3.1.
dijit.byId("myDialog").show();
var gridStore = new dojo.data.ItemFileReadStore({
data : {
identifier : "id",
items : [
{"id" : 1, "label" : "foo"},
{"id" : 2, "label" : "bar"},
{"id" : 3, "label" : "baz"}
]
}
});
/* A simple layout that specifies column headers and
* mappings to fields in the store */
var gridLayout = [
{name : "ID", field : "id", width : "50%"},
{name : "Label", field : "label", width : "50%"}
];
/* Programmatically construct a data grid */
var grid = new dojox.grid.DataGrid({
store : gridStore,
structure : gridLayout
}, "gridNode");
/* Tell the grid to lay itself out since
* it was programmatically constructed */
grid.startup();
The markup is:
<div dojoType="dijit.Dialog" id="myDialog" title="Multiple Addresses" style="width:400px;height:300px" >
<div dojoType="dijit.layout.ContentPane" id="gridNode" style="positon:relative;width:100%;height:100%"></div>
Thanks for any help,
Ruprict
So, the problem I was having seeem to stem from not putting an explicit style on the grid container div (gridNode) Once I did this:
<div dojoType="dijit.layout.ContentPane" id="gridNode" style="width:400px;height:300px"></div>
It started working.
FYI. I am doing a similar thing (grid in a dialog) and have discovered if I try to modify the store (or at least call setStore on the grid) while the dialog is hidden, errors occur. Just something to watch out for.
I was creating all of it programatically so that didnt work for me, i had to connect to _getFocusItems method of the dialog, thats happen only the animation of the dialog ended.
lov.connect(lov,"_getFocusItems",dojo.hitch(this,function(){
var dijitTitle = new dijit.TitlePane({
title: "Resultados",
toggleable:false,
open:true,
style:"min-width:98%;display:inline-block;width:98%;height:"+dialogStyle.h-100+"px;",
baseClass:"dijitTitlePane qtResultsTitle"
},div);
dijitTitle.startup();
var fisaSubGrid = new dojox.grid.EnhancedGrid({
store:store,
structure: layoutRate,
autoHeight:"true",
autoWidth:true,
initialWidth:dialogStyle.w-50+"px",
plugins: {
pagination: {
description: false,
sizeSwitch: false,
pageStepper: true,
gotoButton: false,
maxPageStep: 5,
position: "bottom",
defaultPage: 2,
defaultPageSize: 10
}
}
});
dijitTitle.addChild(fisaSubGrid);
fisaSubGrid.startup();
}));

Resources