Use of Type in InitComponent EXTJS - javascript

I'm a bit new at using EXTJS, so I was working with a tutorial (modifying it to fit the requirements I have), and I'm running into an error. Here is the tutorial code (I can't post my actual code, but it has the same idea, just different method names):
Ext.define('Srchr.view.Viewport', {
extend: 'Ext.Viewport',
requires: [
'Srchr.view.SearchBar',
'Srchr.view.History',
'Srchr.view.SearchResults'
],
layout: {
type: 'fit'
},
initComponent: function() {
this.items = [
xtype: 'panel',
cls: 'srchr',
this.dockedItems = [
this.createSearchBar(),
this.createHistory()
];
this.items = [{
id: 'tabs',
xtype: 'tabpanel',
layout: 'fit',
items: [
this.createTwitterSearchResults(),
this.createAnswersSearchResults()
]
}]
];
this.callParent(arguments);
},
createSearchBar: function() {
this.searchBar = Ext.create('widget.searchbar', {
dock: 'top',
height: 60
});
return this.searchBar;
},
createHistory: function() {
this.history = Ext.create('widget.history', {
id: 'history',
dock: 'left',
width: 320
});
return this.history;
},
createTwitterSearchResults: function() {
this.twitterSearchResults = Ext.create('widget.searchresults', {
id: 'twittersearchresults',
title: 'Twitter Search Results Placeholder'
});
return this.twitterSearchResults;
},
createAnswersSearchResults: function() {
this.answersSearchResults = Ext.create('widget.searchresults', {
id: 'answerssearchresults',
title: 'Answers Search Results Placeholder'
});
return this.answersSearchResults;
}
});
So here's the issue: I'm getting an error on line 14 xtype: 'panel', for "Unexpected token :". I've tried everything I can think of to fix the issue, and can't find the right solution. How can I get rid of this error?
Thanks!

Wrap your panel-item in brackets:
this.items = [{
xtype : 'panel',
cls : 'srchr',
dockedItems : [this.createSearchBar(), this.createHistory()]
}]
Besides this, you are overriding your items object with a tabpanel. If you want to add two items, put two in your array:
this.items = [{
xtype : 'panel',
cls : 'srchr',
dockedItems : [this.createSearchBar(), this.createHistory()]
}, {
id : 'tabs',
xtype : 'tabpanel',
layout : 'fit',
items : [this.createTwitterSearchResults(), this.createAnswersSearchResults()]
}]

Related

Ext JS: tpl config is ignoring html in Panel

I need to use both of configs tpl and html within panel class but it's not let to render both configs.
How can be able to use both?
Ext.define('InfoCard.Main', {
extend: 'Ext.panel.Panel',
viewModel: {
type: 'infocardvm'
},
layout: {
type: 'table'
},
items: [{
xtype: 'infocard',
userCls: 'totalReCls',
bind: {
html: '{totalReBar}'
}, //Can't use 'tpl' here because it doesn't have setTpl()
glyph: 'xf015#FontAwesome',
// tpl: 'TotalReBar' //When I'm uncomment the config, then ignores 'bind: html'
}]
});
Here is full sample FIDDLE.
Question is related with this post at Software Engineering site.
You can use displayfield inside of items of panel. In display field have methods for setValue() and setFieldLabel(). So you can change on basis of requirement.
In this FIDDLE, I have created a demo using your code and put modification. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.define('InfoCard.Main', {
extend: 'Ext.panel.Panel',
tbar: [{
text: 'Refresh data',
handler: function () {
var vm = this.up('panel').getViewModel(),
store = vm.getStore('firstStore');
store.getProxy().setUrl('stat1.json');
store.load();
}
}],
viewModel: {
type: 'infocardvm'
},
layout: {
type: 'table'
},
defaults: {
xtype: 'infocard',
},
items: [{
items: {
xtype: 'displayfield',
fieldLabel: 'Total ReBar',
bind: '{totalReBar}'
},
glyph: 'xf015#FontAwesome'
}, {
items: {
xtype: 'displayfield',
fieldLabel: 'Total RoBar',
bind: '{totalRoBar}'
},
bodyStyle: {
"background-color": "#DFE684"
},
glyph: 'xf015#FontAwesome'
}, {
items: {
xtype: 'displayfield',
fieldLabel: 'Total PaBar',
bind: '{totalPaBar}'
},
bodyStyle: {
"background-color": "#fbe3ab"
},
glyph: 'xf015#FontAwesome'
}]
});
When I understand you correctly you want to render a static string with a variable value.
{
xtype: 'infocard',
bind: { data: '{totalReBar}' }, // bind the data for the tpl
tpl: 'TotalReBar {totalCount}' // use the data provided via binding in the tpl
}
The formula now has to return an object for the tpl data binding.
You can access the values in the tpl via the key's.
formulas: {
totalReBar: {
bind: {bindTo: '{firstStore}', deep: true},
get: function (store) {
var record = store.findRecord("code", "TOTALRE");
return {
totalCount: record ? record.get("totalcount") : "-1" // totalCount is now available in the tpl as a variable
};
}
},
See the modified fiddle.
I believe that what you want is this:
{
xtype: 'infocard',
userCls: 'totalReCls',
bind: {data: {'myVal': '{totalReBar}'}},
glyph: 'xf015#FontAwesome',
tpl: '{myVal}'
}
hope that helps

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

Explicitly Calling initComponent of extJS Class

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.

How to get Fields from store in ExtJS5

I created a normal window in ExtJS5 which has one grid and one button. I want to get store field items from grid store and want to do another functionality.
When i get store.fields, it shows null. But if i get in ExtJS3, then it works proper.
In below image, I am getting store fields or fields items in ExtJS3.
Here is my code (ExtJS5)
Ext.onReady(function () {
var States = Ext.create('Ext.data.Store',
{
fields: ['value'],
data:
[
{ "value": "HR" },
{ "value": "DL" },
{ "value": "RJ" }
]
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Submit',
handler: function () {
var storeFields = Ext.getCmp('grdSample').getStore().fields;
//storeFields get null;
}
},
{
xtype: 'grid',
id: 'grdSample',
store: States,
columns: [
{
header: 'Name',
dataIndex: 'value'
}
]
}
]
}]
}).show();
});
grid.getStore().getModel().getFields() should do what you want.

extjs layout scroll inside vbox

I have a problem with adding scrollbar to grid, that is inside of vbox container.
I can not assign height directly, because I do not know it. In that vbox container also is 'another content' with undefined height, so I can not use neither 'height', neither 'flex'. I need to make grid fill all remaining space in the page, and if there will be more rows than it could fit - i need to add scrollbar to that grid.
This is most important part of code:
{
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
title: 'center'
},{
html: 'another content'
},{
xtype: 'grid',
autoScroll: true, // <-- this is not working
columns: [
{ text: 'User', dataIndex: 'userId' }
],
store: new Ext.data.Store({
model: 'Ext.data.Record',
fields: [
{ name: 'userId', type: 'string' }
],
data: ( function(){
var res = []
for(var i=0; i<1000; i++){
res.push({ userId: 'User'+i});
}
return res;
})()
})
}
]
}
I tryed a lot of variants, but no success.
I also prepere some fiddles for most logical solutions(but scroll is not working there anyway):
https://fiddle.sencha.com/#fiddle/fmo
https://fiddle.sencha.com/#fiddle/fmp
Any help will be good.
Just remove autoScroll: true and replace it with flex: 1.
https://fiddle.sencha.com/#fiddle/fms
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: {
type: 'border'
},
items: [
{
width: '100%',
region: 'north',
items: [{
title: 'north'
},{
html: 'another content'
}]
},
{
region: 'center',
layout: 'fit',
items: [{
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
title: 'center'
},{
html: 'another content'
},{
xtype: 'grid',
flex: 1,
columns: [
{ text: 'User', dataIndex: 'userId' }
],
store: new Ext.data.Store({
model: 'Ext.data.Record',
fields: [
{ name: 'userId', type: 'string' }
],
data: ( function(){
var res = []
for(var i=0; i<1000; i++){
res.push({ userId: 'User'+i});
}
return res;
})()
})
}
]
}
]
}]
});
}
});

Categories