We Keep Coding

ExtJS 5 Uncaught TypeError: cannot read property 'parentNode' of null in Tab Panel

I am using ExtJS version 5.1.0.
Problem: I have a Ext.panel.Panel in my view. In this panel's beforeRender, I am trying to add an xtype:'form' whose items contain a tabpanel with multiple tabs.
When I switch the tab after some seconds of waiting on other tab, I get this exception
Uncaught TypeError: cannot read property 'parentNode' of null
And as a result of this, entire view of the switched tab is lost(its blank).
I have been trying this for a time now, but unable to find a solution.
Any suggestions on this would be a great help.
Here is my code snippet:
Ext.define({
'myClass',
extend: 'Ext.panel.Panel',
layout: 'fit',
viewModel: {
type: 'abc'
},
beforeRender: function() {
var me = this;
me.add({
xtype: 'form',
trackResetOnLoad: 'true',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
me.getContainer()
]
});
},
getContainer: function() {
var me = this;
var tabpanel = Ext.create({
'Ext.TabPanel',
allowDestroy: false,
reference: 'abc', //being used in application somewhere
layout: 'fit',
border: 0,
activeTab: 0,
items: [{
xtype: 'container',
bind: {
data: {
abcd
}
},
title: 'tab1',
layout: 'fit',
items: [
me.createContainer1() // contains form fields
]
},
{
xtype: 'container',
title: 'tab2',
layout: 'fit',
bind: {
data: {
abcf
}
},
items: [
me.createContainer2() // contains form fields
]
}
]
});
}
});
This is not a duplicate, it is a issue related to tabpanel and not simple HTML. It uses framework related knowledge. If anyone has idea about this, then please explain.

Firstly you need to use beforerender event instead of beforeRender and beforerender will be inside of listeners.
And also you can return directly xtype instead of creating like below example
createField: function() {
return [{
xtype: 'textfield',
emptyText: 'Enter the value',
fieldLabel: 'Test'
}];//You here return Object or Array of items
}
In this FIDDLE, I have created a demo using your code and make some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//Define the viewmodel
Ext.define('ABC', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.abc',
data: {
tab1: 'Tab 1',
tab2: 'Tab 2',
tab3: 'Tab 3',
tab4: 'Tab 4',
title: 'Basic Example'
}
});
//Define the panel
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mypanel',
layout: 'fit',
//This function will return field items for container or panel
createContainer: function (fieldLabel) {
return {
xtype: 'textfield',
emptyText: 'Enter the value',
fieldLabel: fieldLabel
};
},
//This function will return tabpanel for form items.
getContainer: function () {
var me = this;
return {
xtype: 'tabpanel',
allowDestroy: false,
//reference: 'abc', //being used in application somewhere
layout: 'fit',
border: 0,
activeTab: 0,
items: [{
bind: '{tab1}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab1 field') // contains form fields
}, {
bind: '{tab2}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab2 field') // contains form fields
}, {
bind: '{tab3}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab3 field') // contains form fields
}, {
bind: '{tab4}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab4 field') // contains form fields
}]
};
},
listeners: {
beforerender: function (cmp) {
var me = this;
//Add form inside of panel
me.add({
xtype: 'form',
trackResetOnLoad: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: me.getContainer()
});
}
}
});
//Create the mypanel
Ext.create({
xtype: 'mypanel',
viewModel: {
type: 'abc'
},
bind: '{title}',
renderTo: Ext.getBody()
});
}
});

ExtJS conditionally render input fields

I have the following code in ExtJS
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Panel title',
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'FirstName',
}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'LastName',
},{
xtype:'fieldset',
title: 'Phone Number',
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business',
toBeRendered: IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE // custom property that must restrict rendering
rendered: IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE //doesn't work
}]
}]
}]
});
I want to create an application, that will have properties file where I can set up flags for SUPPORTED fields e.g IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE = false. If it's false than text input fieldLabel: 'Business' will not be rendered at all - no hidden/disabled text input Business in html.
I've tried rendered property - but it doesn't work, the only solution so far is to use items = Ext.Array.filter(items,filterFunction) in onRender;
Are there any other solutions how can I restrict rendering input elements?
Thanks in advance.

Instead of the constructor, use the initItems method:
Ext.define('MyComponent', {
extend: 'Ext.panel.Panel',
xtype: 'mycomponent',
bodyPadding: 10,
border: true,
title: 'My component',
items : [
{
xtype: 'button',
text: 'My allowed button'
}
],
initItems : function() {
var items = this.items;
// Your conditions
if (false) {
items.push({
xtype: 'button',
text: 'My denied button'
});
}
this.callParent();
}
});
https://fiddle.sencha.com/#fiddle/17qi

I think that best approach is to define custom components for your application parts and add required components within its constructor, like this:
constructor: function () {
var myComponentItems = [
{
xtype: 'button',
text: 'My allowed button'
}
];
// Your conditions
if(false) {
myComponentItems.push({
xtype: 'button',
text: 'My denied button'
});
}
Ext.apply(this, {
items: myComponentItems
});
this.callParent(arguments);
}
Working fiddle

Creating a window in extjs

I have this code:
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true
});
tb = Ext.getCmp('head-toolbar');
tb.add({
text: 'Export',
menu: Ext.create('Ext.menu.Menu', {
items: [
{
text: 'Export',
handler: function () {
var win = new innerWindow();
win.show();
}
}
]
})
});
It creates a dropdown that has a value called 'export'. I have managed to make it so that, when I click the 'Export', I get a window. For now this window is empty. What I have been looking for, and unable to find, is how to create a window that has some text inside, and some options (dropdown box), and labels etc.
More precisly, I want a window like the one I attached. I'm sure I can find examples on how to create this, but I just don't know what to search for. Searching on "Extjs window" and similar words, didnt bring me the help I'm looking for, nor looking at Senshas homepage (which normally has lots of brilliant examples).
Can someone help me out?
Thanks

In your code change
var win = new innerWindow();
to
var win = Ext.create('innerWindow');
Then just define your window with the form inside:
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age'
},{
xtype: 'textfield',
fieldLabel: 'Height',
name: 'height'
}],
fbar: [{
text: 'Submit',
formBind: true,
itemId: 'submit'
}]
}]
});
The documentation is here: form, textfield, combobox. Start reading the guides. You must read the docs to understand. ExtJs doc is well written.

Each ExtJS component has a property named items...
You should be adding the fields you want into the items property.
It would look something like this..
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items:[
{
xtype:"textfield",
......
},{
xtype:"combobox",
store:myStore,
.......
}
]
});
You should check the docs of Window, it does have info about items, and it also does include examples.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window
You should also include a layout for that window, for it to know how to arrange its items. Here's a link showing all types of layouts: http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
Also, I'm not sure about the new innerWindow, I'd rather use Ext.create('innerWindow') to create a new instance of a component you've defined.

Set Extjs Script
<script type='text/javascript' src='http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js'></script>
Set Extjs CSS
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
Set Code
<script type='text/javascript'>
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Windows',
closable: true,
closeAction: 'hide',
width: 350,
minWidth: 250,
height: 125,
animCollapse:false,
border: false,
modal: true,
layout: {
type: 'border',
padding: 5
},
items: [{
xtype: 'form',
items: [{
xtype : 'combo',
fieldLabel : 'Age',
width : 320,
store : [ '18', '19', '20' ]
},{
xtype : 'combo',
fieldLabel : 'Height',
width : 320,
store : [ '1', '2', '3' ]
},],
fbar: [{
text: 'Submit',
formBind: true,
itemId: 'submit'
}]
}]
}).show();
});
</script>
Similar you want http://jsfiddle.net/ba3wnwpo/

ExtJS - reading a property from a custom panel

I'm trying to read a property from my custom panel for using it into a property item from the same panel. Let me show my code so you can understand what I mean:
Ext.define('XXX.XXX.XXX.MyPanel', {
extend: 'Ext.panel.Panel',
title: 'My Panel',
autoScroll: true,
isMyProperty: false,
defaults: {
margin: 4,
xtype: 'horizontalfieldpanel'
},
items: [
{
title: 'SOme title',
itemId: 'title1',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: !this.isMyProperty
}, {
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
allowBlank: !this.isMyProperty
}, {
As you can see I have isMyProperty and I'm trying to use it on allowBlank, but it is not taking it. it is taking the value for default.
Any idea what I'm doing wrong?
Thanks,

The conventional way is to use the 'config' subsystem. This tells it to add a new configuration option to your class which also generates a getter/setter method for it.
The configuration option can be overridden when the panel is constructed just like any other config option in the base class.
One trick is that your items must then be constructed in the initComponent method as opposed to doing it in the class definition. I've found that in sophisticated applications, it's better to plan on overriding initComponent to create your items instead of using "static" item declarations in most situations.
Ext.define('XXX.XXX.XXX.MyPanel', {
extend: 'Ext.panel.Panel',
config: {
isMyProperty: false
},
title: 'My Panel',
autoScroll: true,
defaults: {
margin: 4,
xtype: 'horizontalfieldpanel'
},
initComponent: function() {
this.items = [{
title: 'Some title',
itemId: 'title1',
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: !this.#getIsMyProperty()
}, {
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
allowBlank: !this.#getIsMyProperty()
}, {
...
}]
}];
this.callParent(arguments);
}
});
To override the value at construction:
var panel = Ext.create('XXX.XXXX.XXXX.MyPanel', {
isMyProperty: true
});

Extjs getting the `formpanel` that is created dynamically from button click

I have ExtJS View-Port panel, that contain center panel, that contain tablpanel, in which I have added gridpanel in one tab, on this I have put Add Person button in tbar of , that will add a new tab of a formpanel, in its Reset button, I am not able to access Form to reset it.
Do any body have faced same issue?
Please help how to get it working.
Ext.onReady(function() {
// Ext.get(document.body, true).toggleClass('xtheme-gray');
var myBorderPanel = new Ext.Viewport({
title: 'Software Releases',
// renderTo: document.body,
renderTo: Ext.getBody(),
layout: 'border',
id: 'main',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
tbar: [{
text: 'Add person', // only when user have write priovilege.
handler: function() {
var tabpanel = Ext.getCmp('main').findById('tabs');
var wtab = tabpanel.add({
// // var addrelease_win = new Ext.Window({
url: 'reledit-submit.json',
id: 'addform0',
// height: 300, width: 400,
layout: 'form',
frame: true,
title: 'Add New Release',
closable: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
}],
buttons: [{
text: 'Save',
scope: wtab,
handler: function() {
wtab.getForm().submit({
success: function(f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f, a) {
Ext.msg.alert('Warnning', 'Error');
}
});
}
}, {
text: 'Reset',
scope: wtab,
handler: function() {
// Ext.getCmp('addform0').getForm().reset();
// tabpanel.getActiveTab.reset();
// Ext.getCmp('main').findById('addform').getForm().reset();
// this.getForm().reset();
// this.getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ' + Ext.getCmp('addform0').getValue() + ' sdfsd');
this.findById('addform0').getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ');
}
}]
});
// addrelease_win.show();
tabpanel.activate(tabpanel.items.length - 1);
}
}],
xtype: 'tabpanel',
id: 'tabs',
activeTab: 0,
items: [{
title: 'Data',
xtype: 'editorgrid',
store: store,
stripeRows: true,
// autoExpandColumn: 'title',
columns: [{
header: "Name",
dataIndex: "name",
width: 50,
sortable: true
}, {
header: "DOB",
dataIndex: "dob",
sortable: true
}]
}],
margins: '5 5 0 0',
})
})
});

Doesn't wtab.getForm().reset(); work?
If not, use this.ownerCt to get to the buttons container and then just walk up the chain until you get to a point where you can access the form.
UPDATE
The real problem is that its a Panel with a form layout that is created and not a FormsPanel.
Change layout:'form' into xtype:'form' and .getForm() should work.