when i run this code , it will generate a menu panel, but in ExtJS 5.1 the menu panel will disappears when once you click the menu item and then click anywhere else.
is that a ExtJS 5.1's bug ?
ExtJS 5.0 and ExtJS 4.x are work fine.
Ext.application({
name : 'Fiddle',
launch : function() {
var menu = Ext.create('Ext.menu.Menu',{
floating : false,
items : [{
text : 'Service Info',
itemId : 'service'
},{
xtype: 'menuseparator'
},{
text : 'Project Info',
itemId : 'project'
}],
renderTo : Ext.getBody()
})
}
});
https://fiddle.sencha.com/?fiddle=jhb#fiddle/jhb
I've found this bug in Sencha Community Forums ,http://www.sencha.com/forum/showthread.php?296537-5.1.0-trouble-with-menus-disappearing
but this fix are not included by release build(Ext JS 5.1.0.107)
I have the following code which creates a tab inside of a tabpanel:
id: 'tabs',
region: 'center',
xtype: 'tabpanel',
autoDestroy: false,
items:[{
xtype: 'country-rate-grid',
id: 'LegalCompliance',
title: 'Legal Compliance',
store: 'RateManagement.store.LegalRateStore',
hidden: true,
closable: true,
listeners: {
'close': function(tab, eOpts) {
tab.hide();
}
}
}
When I close the tab via the X button, and then try to re-open it via tabs.child('#'+record.data.id).tab.show();, I get this error in the console:
Uncaught TypeError: Cannot read property 'tab' of null
It looks like it is deleting the tab instead of hiding it. How can I just show and hide my tabs instead of deleting them from the DOM when someone clicks the close button on the tab?
Quoting Ext JS 4.2.2 docs:
Note: By default, a tab's close tool destroys the child tab Component and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable re-use of a tab, configure the TabPanel with autoDestroy: false.
EDIT: Ok, now I think I get what you're trying to do and where it went wrong. I've looked up the code and it looks like autoDestroy: false does not in fact destroy a container's child, but it detaches that child from the document body and removes it from the container's children collection. That's why you're seeing it disappearing from the DOM. The DOM nodes are not lost however, and are appended to the detached body element that is available through Ext.getDetachedBody(). That's also why you can't refer to the component by calling tabs.child(blah) - the tab has been removed from there.
So if you're trying to kind of hide a tab panel upon closing, to be able to show it again, you'd have to re-insert it back into the tab panel:
Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
renderTo: document.body,
width: 300,
height: 200,
autoDestroy: false,
items: [{
id: 'foo',
title: 'Foo',
closable: true,
html: 'foo bar'
}, {
id: 'bar',
title: 'bar',
closable: false,
items: [{
xtype: 'button',
text: 'Bring foo back!',
handler: function() {
var foo = Ext.getCmp('foo');
foo.ensureAttachedToBody();
tabs.insert(foo);
}
}]
}]
});
});
foo.ensureAttachedToBody() will re-attach the DOM nodes for that panel back to the document body, and then we insert it into the tab panel as if nothing had happened. Voila.
Sencha Touch 2.2.1
Cmd 3.1.342
I have a sencha web app used to display data using Sencha Charts and carousel. The data is obtained via ajax. Components are created according to the amount of data that is received from the server.
Everything works fine in development. However, when I create a production build, the components are created, but not populated with the carousel and the app crashes. It seems that this happens when I try to add the carousel the carousel to the container using: Ext.getCmp(siteNamex+'Cont').add(thecarousel);
It then dies and console log says:
Uncaught TypeError: Cannot call method 'substring' of undefined
Ext.ClassManager.parseNamespace
Ext.ClassManager.get
Ext.ClassManager.instantiate
Ext.ClassManager.instantiateByAlias
Ext.apply.factory
Ext.define.factoryItem
Ext.define.add
Ext.Ajax.request.success
Ext.apply.callback
Ext.define.onComplete
Ext.define.onStateChange (anonymous function)
Here is the code which creates the container:
newcontainer = Ext.Container({
xtype : 'container',
flex: 1,
margin: '0',
id: siteNamex+'Cont',
itemId: siteNamex+'Cont',
height: '100%',
items: [],
cls:'siteContainer',
html: '<h2 class="siteName" style="'+snStyle+'">'+siteName+'</h2>'
});
This code seems to be working and creates the container as required.
Charts populate an array. The size depends on the data received via ajax:
var allcharts = new Array(); //initializing
Create gauge chart:
chartgx = Ext.chart.Chart({
xtype: 'chart',
renderTo: Ext.getBody(),
cls: 'thegauge',
itemId: 'gauge'+tt2,
store: gaugeStore,
width : 'auto',
background: 'white',
animate: true,
insetPadding: 50,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: gaugemax,
steps: 10,
margin: 10
}],
series: [{
type: 'gauge',
field: 'CurrentValue',
donut: 30,
colorSet: ['#f6821f;', '#e0e2e4']
}]
});
Then I put this gauge in a container and add to array:
chartgx2 = Ext.Container({
xtype : 'container',
flex: 1,
layout: 'fit',
cls: 'gaugeContainer',
items: chartgx,
html: gaugeText
})
allcharts.push(chartgx2);
The carousel is then created using:
thecarousel = Ext.Carousel({
xtype: 'carousel',
width: '100%',
height: '100%',
itemId: 'thecarousel_'+siteName,
cls: 'chartscarousel',
id: siteNamex+'_carousel',
defaults: {
styleHtmlContent:true
},
items: allcharts
})
and is added to the container using Ext.getCmp(siteNamex+'Cont').add(thecarousel);
As I said earlier, this all works fine in development, but in the production build it throws up the error mentioned.
My app.js has the following:
requires: [
'Ext.field.Select',
'Ext.Ajax',
'Ext.Button',
'Ext.carousel.Indicator',
'Ext.carousel.Infinite',
'Ext.carousel.Item',
'Ext.carousel.Carousel',
'Ext.fx.easing.EaseOut',
'Ext.util.TranslatableGroup',
'Ext.chart.Chart',
'Ext.chart.axis.Gauge',
'Ext.chart.theme.*',
'Ext.util.Format',
'Ext.MessageBox',
'Ext.form.Panel',
'Ext.Panel',
'Ext.fx.Parser',
'Ext.Container',
'Ext.data.*',
'Ext.dataview.List',
'Ext.dataview.component.Container',
'Ext.chart.theme.Base',
'Ext.chart.theme.TitleStyle',
'Ext.chart.theme.GridStyle',
'Ext.chart.Toolbar',
'Ext.chart.legend.View',
'Ext.chart.Legend',
'Ext.chart.series.Bar',
'Ext.chart.series.Column',
'Ext.chart.series.Gauge',
'Ext.chart.series.Series',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.draw.Surface',
'Ext.draw.Draw',
'Ext.draw.Matrix',
'Ext.draw.engine.Canvas',
'Ext.draw.CompositeSprite',
'Ext.fx.Frame',
'Ext.draw.Sprite',
'Ext.fx.Sprite',
'Ext.Component',
'Ext.ComponentManager',
'Ext.ComponentQuery',
'Ext.TitleBar',
'Ext.draw.sprite.Sector',
'Ext.draw.sprite.Rect',
'Ext.chart.interactions.Abstract',
'Ext.chart.axis.Axis',
'Ext.util.SizeMonitor',
'Ext.chart.grid.HorizontalGrid',
'Ext.chart.grid.VerticalGrid'
],
When I run build command there are no errors.
Sencha Touch 2.2.1
Cmd 3.1.342
Update:
I rebuilt the gauge using this code exactly as it appears on the page. This did not resolve the problem
I would debug it like this:
Open your app in Chrome
Open dev tools
Go in "Sources" tab
Click two times on the pause symbol ("Pause on uncaught exceptions", bottom left arrow in the image bellow)
Do the thing that makes your application crash, or reload if it crashes on loading
The debugger will kick in just before throwing the exception you've noted
In the call stack, select the line Ext.ClassManager.instantiateByAlias (second arrow)
In the "Scope Variables" tab, you'll see the name of the culprit (circled bellow)
The variable name may be different because of the minification process, but you should be able to identify it easily. Optionally, you can disable compression in the file .sencha/app/production.properties to see the real code and make it easier.
I added a loadmask to a panel and I want the spinner to be displayed each time stores associated with the loadmask are loaded. The panel is a large tooltip and the stores are loaded each time a point is visited in a line chart. Thus, when I hover over a point, I'm expecting a load message to appear for a short period of time before I see the contents in the panel. What I'm getting is an empty panel however. If I remove the code that I have which adds the load mask (the initComponent function), it works (without the load message though). How would I use the loadmask in this manner as opposed to explicitly calling the setLoading() method for each panel?
Here's the code:
tips:
{
...
items:{
xtype: 'panel',
initComponent: function(){
var loadMask = new Ext.LoadMask(this, {
store: Ext.getStore('CompanyContext')
});
},
id: 'bar-tip-panel',
width: 700,
height: 700,
layout: {
type: 'accordion',
align : 'stretch',
padding: '5 5 5 5'
},
items:...
}
}
config object isn't the proper place to override initComponent method. What you should do is to define a subclass of Panel, and override the method there.
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mypanel',
initComponent: function() {
this.callParent(arguments); // MUST call parent's method
var loadMask = new Ext.LoadMask(this, {
store: ...
});
},
});
Then, you can use xtype mypanel in your tips configuration.
I try to setLayout when the orientation was changed , but I get this type of error :
*Console.js:17Uncaught Error: [ERROR][Ext.Container#setLayout] Replacing a layout after one has already been initialized is not currently supported.*
and I cannot get, what is going on here. Here is my code :
onOrientationChange:function(viewport, orientation){
viewport.setLayout('vbox');
}
where the viewport is :
Ext.define("Q4.view.blg", {
extend: 'Ext.Container',
xtype: 'blg',
config:{
title:"blg",
iconCls:'star',
cls:'blogList',
disableSelection: true,
layout: 'hbox',
defaults:{
scrollable:false
},........
Thanks !!!!!!