There is probably a better way to do this and please provide guidance for me as to how to achieve it if possible but I was wondering if there was a way, on a Tab Click, to explicitly call that containers initComponent function? That is, the container that lives inside of that Tab Panel.
I currently have an initComponent in said panel that loads a Grid Panel with several Property Grids. The store changes when the user clicks a button on another Tab to update said panels store,so I'd like to call the initComponent again to refresh the Property Grids with the newly updated store.
Here is a code snippet of the other Tabs button that programatically switches tabs:
buttons: [{
text: 'Configure',
handler: function() {
// Get name of role
var roleList = Ext.getCmp('chefRoleRunListInformationGrid');
if (roleList.getSelectionModel().hasSelection()) {
var roleName = roleList.getSelectionModel().getSelection();
roleName = roleName[0]['raw'][0];
// Get Role Setup form
Ext.getCmp('chefRoleSetupFormPanel').getForm().setValues({
roleName: roleName
});
}
var chefTabPanel = Ext.getCmp('chefTabPanel');
chefTabPanel.setActiveTab(1);
var chefRoleRunListInformationStore = Ext.getStore('chefRoleRunListInformationStore');
var chefRequiredCookbooksGrid = Ext.getCmp('chefRequiredCookbooksGrid');
var roleRunListInfoGrid = Ext.getCmp('chefRoleRunListInformationGrid');
roleRunListInfoGridColumns = roleRunListInfoGrid.columns;
chefRequiredCookbooksGrid.reconfigure(chefRoleRunListInformationStore);
}
}]
After the chefTabPanel.setActiveTab(1), I'd like to call the initComponent function if possible to reload that tab with the new store.
Here is my code for the container that lives in said Tab:
Ext.define('chefCreateAndPinRolesLayoutContainer', {
extend: 'Ext.panel.Panel',
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
border: 1,
items: [{
xtype: 'container',
flex: 1,
layout: 'fit',
items: [
Ext.create('chefRequiredCookbooksGridPanel')
]
}, {
xtype: 'container',
flex: 1,
layout: 'fit',
items: [
Ext.create('chefRoleSetupFormPanel')
]
}]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: 'fit',
items: [
Ext.create('chefOptionalCookbooksGridPanel')
]
}, {
xtype: 'container',
flex: 1,
layout: 'fit',
items: [
Ext.create('chefAttributeGridContainer')
]
}]
}]
}],
initComponent: function() {
var me = this;
var chefRCS = Ext.create('chefRequiredCookbooksStore');
var requiredCookbooksStore = Ext.getStore('chefRequiredCookbooksStore');
var chefAttributesGridContainer = Ext.getCmp('chefAttributesGridContainer');
requiredCookbooksStore.load({
scope: this,
callback: function(records, operation, success) {
requiredCookbooksStore.data.each(function(item, index, totalItems) {
var cookbookName = item['raw'][0];
var cookbookVersion = item['raw'][1];
var attributesGrid = Ext.create('Ext.grid.property.Grid', {
width: 450,
id: cookbookName,
source: {
"Cookbook": cookbookName,
"Version": cookbookVersion
},
viewConfig: {
scroll: 'false',
style: {
overflow: 'auto',
overflowX: 'hidden'
}
}
});
chefAttributesGridContainer.add(attributesGrid);
chefAttributesGridContainer.doLayout();
});
}
});
me.callParent(arguments);
}
});
Any ideas?
Your initComponent code isn't doing anything that needs to be in there. So why not just extract it into an initStore method and then just call it as you would any other method from the initComponent and when you change tabs.
Another suggestion unrelated to the question: avoid using Ext.getCmp it will lead to very tight coupling and bad architecture.
Related
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()
});
}
});
I'm using ExtJS 3.3.2 and I have a panel with some panels nested in vbox and hbox. The problem is easy: My data from items inside hbox are not showing, I tried modifying weight and height but it never shows up. Looking at the code (F12), I see the data is created, but the panels have a very tiny size.
var i = 0;
jsonResp.forEach(function(currentItem) {
i++;
var panel = new Ext.Panel({
id: 'superpanel'+i,
layout: 'vbox',
height: 50,
frame: true,
collapsible: true,
items: [{
xtype: 'panel',
id: 'jsonObject'+i,
layout: 'hbox',
frame: true,
align: 'stretch',
items:[{
id: 'codigo'+i,
xtype: 'panel',
html: currentItem.codigo
},{
id:'nombre'+i,
xtype: 'panel',
html: currentItem.nombre
},{
xtype: 'panel',
html: currentItem.estado.toString()
}]
},{
xtype: 'panel',
id: 'aviso'+i,
html: "Error"
}]
})
Ext.getCmp("contenedor").add(panel);
});
Ext.getCmp("contenedor").doLayout();
I want to create this:
What is wrong? I tried it with width/height and flex but it doesn't work.
width: "100%" and flex can be used to resolve this issue.
Here is how I resolved it.
Ext.onReady(function () {
var viewport = new Ext.Viewport({
items: [{
xtype: "panel",
title: "Test one",
width: 500,
height: 800,
id: "contenedor",
autoScroll: true
}]
});
//delay for adding dynamic content
setTimeout(function () {
var parentPanel = Ext.getCmp("contenedor");
for (var i = 0; i < 10; i++) {
var panel = new Ext.Panel({
id: 'superpanel' + i,
layout: 'vbox',
height: 100,
frame: true,
collapsible: true,
items: [{
xtype: 'panel',
id: 'jsonObject' + i,
layout: 'hbox',
frame: true,
align: 'stretch',
flex: 3,
width: '100%',
items: [{
id: 'codigo' + i,
flex: 1,
xtype: 'panel',
html: 'Demo html 1'
}, {
id: 'nombre' + i,
xtype: 'panel',
flex: 1,
html: 'Demo html 2'
}, {
xtype: 'panel',
flex: 1,
html: 'Demo html 3'
}]
}, {
xtype: 'panel',
id: 'aviso' + i,
html: "Error",
width: "100%"
}]
});
parentPanel.add(panel);
}
parentPanel.doLayout();
}, 2000);
});
Fiddle is created with ExtJS 3.4.1.1. Sadly there is no 3.2.2 version available on sencha fiddle. But this should work with 3.2.2.
Example Fiddle (with ExtJS 3.4.1.1): https://fiddle.sencha.com/#view/editor&fiddle/28ql
I have a grid with drag'n'drop and row editing plugins. It worked fined when it was an outer class. However, since I striped the grid from having a class and put as an inner component, it started giving me errors. If I comment out code concerning plugins, it works fine.
Ext.define('Dashboards.view.widgets.barChartAndLine.BarChartAndLineWidgetForm', {
extend: 'Dashboards.view.widgets.WidgetBaseForm',
xtype: 'barChartAndLineWidgetForm',
items : [{
xtype: 'grid',
rowEditing: null,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
}
},
listeners: {
drop: function() {
this.updateData();
}
},
initComponent: function() {
var me = this;
this.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function() {
me.updateData();
}
}
});
this.plugins = [this.rowEditing];
this.callParent(arguments);
},
store: {
fields : ['label', 'linevalue', 'barvalue'],
bind : {
data : '{widget.data.data.items}'
}
},
columns: [{
header: 'Pavadinimas',
dataIndex: 'label',
flex: 3,
editor: {
allowBlank: false
}
}, {
xtype: 'numbercolumn',
header: 'Stulpelio reikšmė',
dataIndex: 'barvalue',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'numbercolumn',
header: 'Linijos reikšmė',
dataIndex: 'linevalue',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
items: [{
iconCls: 'x-fa fa-trash',
tooltip: 'Pašalinti',
handler: function(g, ri, ci) {
var grid = this.up().up();
grid.getStore().removeAt(ri);
grid.getStore().sync();
}
}]
}],
tbar: [{
xtype: 'button',
text: 'Pridėti',
handler: function() {
var grid = this.up().up();
var r = {
label: 'label',
linevalue: '0',
barvalue: '0'
};
var modelResult = grid.getStore().insert(0, r);
}
}]
}]
});
Instead of adding the rowediting plugin inside the initComponent function, you can set the plugin with grid's configs.
Based on your code have remote data, I created a fiddle to test the view, you can apply the view structure with your data.
If you have any question, let me know.
I have a window on which I want to put 4 grids like this
Grid1 Grid2
Grid3 Grid4
and I want the grids to auto resize on window resize.
It is simple to do this with combined hbox/vbox layout like I did in the example above:
Ext.onReady(function () {
var me = this;
me.store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
me.g1 = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
flex: 1,
store: me.store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
})
//g2,g3,g4 same with g1
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 600,
maximizable: true,
layout: 'fit',
items: [{
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
flex: 1,
xtype: 'container',
layout: 'hbox',
items:[me.g1, me.g2]
},{
flex: 1,
xtype: 'container',
layout: 'hbox',
items:[ me.g3, me.g4]
}]
}]
}]
}).show()
});
Everything works fine on chrome (the window opens in 1 sec), but on Internet Explorer, the window renders between 3-5 seconds, which is too much.
I also tried to float those 4 grids right and left and it rendered much better on IE, but that way I lose auto scroll on grids (unless I put each one in a fit container...) and when i click a record the grid goes up a number of pixels (~20px)
Any ideas on how to do this to work good on IE as well, without those 3-5 secs of rendering?
I am using ExtJs 4.0.7.
PS: The problem is not the loading of grid stores, they come on callback.
You definitely have more nesting than you need, which can significantly slow down the layout. Try getting rid of the 2 outer containers so it looks more like this:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 600,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
flex: 1,
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[me.g1, me.g2]
},{
flex: 1,
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[me.g3, me.g4]
}]
}).show()
You might also consider initializing your window as hidden, then just show/hide it as you need it instead of re-creating it each time.
I am trying to populate a tabpanel with an extension I've created. Inside this extension i have a panel with 2 fields (timefield and datefield) which may have the values from my store.
Each of these fields may have different values in each tab. I am passing these values from the extended component via config. So far I can see these values in the console.log() but I can't put these values inside the fields.
This is how my extended component is:
Ext.define('PlaylistGrid', {
extend: 'Ext.panel.Panel',
alias: 'widget.playlistgrid',
border: false,
config: {
plIndex: 0,
plDate: '1970-10-10',
plTime: '00:00:00'
},
constructor: function(cfg) {
Ext.apply(this, cfg);
this.callParent(arguments);
},
items: [{
layout: 'hbox',
bodyStyle: 'padding: 5px',
border: false,
xtype: 'form',
name: 'myForm',
items: [{
xtype: 'datefield',
fieldLabel: 'Data de início',
name: 'datefld',
itemId: 'datefld'
}, {
xtype: 'timefield',
fieldLabel: 'Horário de início',
name: 'timefld'
}, {
xtype: 'button',
iconCls: 'save',
style: 'margin-left: 10px',
tooltip: 'Salvar data e hora',
handler: function() {
Ext.Msg.alert('Salvando...', 'Implementar');
}
}]
}, {
xtype: 'grid',
border: false,
width: '100%',
height: 476,
columns: [{
header: 'Ordem',
dataIndex: 'order',
width: 50
}, {
header: 'Video',
dataIndex: 'video',
width: 308
}, {
header: 'Duracao',
dataIndex: 'duration',
width: 100
}, {
header: 'Formato',
dataIndex: 'format',
width: 75
}]
}],
listeners: {
render: function(e, eOpts) {
console.log(e.getPlDate());
}
}
});
And this is how I am adding this component inside the tabpanel:
var plSt = Ext.getStore('playlistStore');
plSt.load();
plSt.on('load', function(store, records, successful, eOpts) {
plSt.each(function(record, idx) {
var playlist = {
xtype: 'playlistgrid',
title: 'Playlist ' + (records[idx].data.playlistId),
name: 'playlist' + idx,
plIndex: records[idx].data.playlistId,
plDate: records[idx].data.playlistDate,
plTime: records[idx].data.playlistTime
};
e.add(playlist);
});
if (records.length > 0) {
e.setActiveTab(1);
}
})
The data seems to be ok, but it does not display in the datefield... Do you have any point about it?
I have already search how to do this, but couldn't find the answer at all.
SOLVED
OK, I got it. The solution was simple. I just added a new config var that passes the current tab index, and the afterRender method.
I did this
afterRender: function(e, eOpts) {
var idx = e.getTabIdx();
var dateFld = Ext.ComponentQuery.query('datefield[name=datefld]');
dateFld[idx].setValue(new Date(e.getPlDate()));
//console.log(e.getPlDate());
}
Thank you!