I updated my application from 5.1.2 to EXTJS 6.0.1 and this causes this warning and all the icons from actioncolumn disappeared
This warning is generated from field image.
set property "alt" to solve.
for actioncolumn use
xtype: 'actioncolumn',
width: 25,
items: [
{
icon: '../xxxxxxx/xxxxx.png'
}
Related
I am building an ExtJS application with Sencha Architect.
I want to display a tree grid, but when I export my Application, the grid is displayed completely different. The expand functionality is missing, the icons are missing, even the row height is different than what was displayed inside Sencha Architect. (See Screenshot)
I have encountered similar render issues on different components in the past, but I just ignored them and used a different component.
This is the generated Tree Grid code:
{
xtype: 'tree',
height: '100%',
width: '100%',
store: 'stHitler',
columns: [
{
xtype: 'treecolumn',
width: 159,
dataIndex: 'text',
text: 'Text'
},
{
xtype: 'treecolumn',
width: 150,
dataIndex: 'balance',
text: 'MyTreeColumn1'
}
]
}
EDIT:
It seems it's more of a Sencha Architect issue, and not an ExtJs issue.
This happens only when the app theme I'm using has been installed to the application before I use the component that creates the problem, so it probably hasn't included the specific component when the scss is built (?).
If I replace the theme in the application with a new one, the problem is solved, at least until I add again a new component that did not exist when I installed the theme.
What is the solution to this problem? It is not possible each time I add a new component to add a new theme and customize it from the beginning all over again. Also rebuilding the SCSS doesn't seem to fix the problem.
I need to align header item in panel right after the title, like this:
[title][item]============================[<<]
But got this:
[title]============================[item][<<]
I'm using extjs 4.2.1
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
collapsible: true,
renderTo: Ext.getBody(),
header: {
titlePosition: 0,
title: "title",
items: [{
xtype: 'button',
text: 'test'
}]
}
});
});
You could position it with a class. fiddle
For version 4.2.1, the title component is hard-coded with a flex of 1 which pushes the other items and tools to the far side. We can intercept its addition to the container and remove the flex and add our own spacing with margin. ExtJS 4.2.1 Fiddle
If you need to keep tools or other items to the far side you can add your items wrapped in a container with a flex of 1.
Version 5 introduced Ext.panel.Title class, we can set the title config as an object which is passed to the internal Ext.panel.Title component. We can set the flex to undefined as shown in this ExtJS 5+ Fiddle
I have a popup windows which is suppose to show an email (which is in html) in the centerPanel. That panel is in the center region of the border layout.
It absolutely has autoscroll set to true and I know that my test data is much larger than the panel. But I can't get it to scroll.
Is there, perhaps, a better way of setting this up? I've tried some other object like a label, display, textarea etc. as an item in the center panel and set that object with autoscroll : true with no success
popup = new Ext.Window({
width: 900,
height: 320,
resizable: true,
draggable: true,
id: 'popupWindow',
layout: {
type: 'border'
},
items: [
// ...
{
xtype: 'panel',
region: 'center',
id: 'centerPanel',
autoscroll: true,
margin: '0 5 0 5',
html: jsonData.email
},
// ...
]
});
It should be autoScroll, not autoscroll.
Got it!
I had to add overflowY: 'scroll' to the center panel.
Thev's answer is correct; however, it depends upon which version of Ext JS you are using (read below).
autoscroll means nothing to Ext JS, specifically. It becomes a new Javascript property entirely distinct from autoScroll due to the casing.
Watch out, though: Ext's 5.1 Documentation specifies that autoScroll is now deprecated and that scrollable (with the appropriate configuration) should be used, instead.
I upgraded a Sencha ExtJs project from version 4.1.1 to the new released version 5.0.1 and now get
the error "[E] Layout run failed" in the webdev console.
In the older version everything works as expected.
The error message comes from the column layout, used in a container nested in the two filsets.
When I exchange the layout to e.g. vbox then no error occurs.
What is wrong in the following code which lets the layout run fail and how to fix it.
Thank's for every hints, tips or solutions.
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8ov
Ext.onReady(function() {
Ext.create('Ext.form.FieldSet', {
title: 'Grouping Fieldset',
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'fieldset',
title: 'Fieldset - 1',
layout: 'anchor',
width: '100%',
items: [
{
xtype: 'textfield'
},
/*...more input fields...*/
{
xtype: 'container',
layout: 'column',
width: '100%',
items: [
{
xtype: 'textfield',
width: 25
},
{
xtype: 'textfield',
width: 50
},
{
xtype: 'textfield'
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Fieldset - 2',
layout: 'anchor',
items: [
{
xtype: 'textfield'
}
/*...more input fields...*/
]
}
]
});
});
The stack trace using Ext.Loader:
log Util.js:704
logx Util.js:744
Ext.apply.log.log.error Util.js:748
Ext.define.handleFailure Context.js:597
Ext.define.runComplete Context.js:1129
callOverrideParent Ext.js:58
Ext.Base.Base.addMembers.callParent Base.js:1256
Ext.override.runComplete Component.js:174
Ext.define.run Context.js:1120
Ext.define.statics.flushLayouts Component.js:182
Ext.define.statics.resumeLayouts Component.js:198
Ext.resumeLayouts Component.js:5948
Ext.define.render Renderable.js:685
Ext.define.constructor Component.js:1743
constructor Class.js:29
(anonymous function) VM1725:3
Ext.ClassManager.Ext.apply.create ClassManager.js:1413
Ext.define.launch Application.js:10
Ext.define.onBeforeLaunch Application.js:407
Ext.define.constructor Application.js:325
constructor Class.js:29
(anonymous function) Application.js:23
Ext.env.Ready.invoke Ready.js:271
Ext.env.Ready.invokeAll Ready.js:313
Ext.env.Ready.unblock Ready.js:445
Ext.apply.triggerReady Loader.js:761
Ext.apply.checkReady Loader.js:906
Ext.apply.load Loader.js:592
Ext.apply.require Loader.js:477
Ext.apply.triggerReady Loader.js:733
Ext.apply.checkReady Loader.js:906
Ext.apply.onLoadSuccess Loader.js:649
Ext.Boot.Request.notify bootstrap.js:904
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Request.loadEntries bootstrap.js:856
Ext.Boot.Boot.processRequest bootstrap.js:451
Ext.Boot.Boot.load bootstrap.js:472
Ext.Boot.Boot.requestComplete bootstrap.js:507
Ext.Boot.Request.notify bootstrap.js:908
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Entry.notifyRequests bootstrap.js:1328
me.fetch.complete bootstrap.js:1242
readyStateChange
Update
When I put every textfield in an own container the layout error is gone and the gui is
acting like expected.
But this is only a workaround...
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8re
//...items of secound fieldset
{
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'container',
items: [
{
xtype: 'textfield',
width: 50
}
]
},
{
xtype: 'container',
items: [
// ...nesting next textfield in container
Layout run failures often happen when you have an inner container (e.g., your "column" layout) with a stretched width INSIDE a parent container (e.g. your "anchor" layout) with a stretched width.
In short, the framework can't appropriately size things because it's all stretched. It could be your anchor layout, the column layout, or one of the other stretched things in there. This is commonly known as "over-nesting".
The top-level container in your code appears to be a fieldset - inside of which you have another fieldset (etc), and both have anchor layouts. More than likely you want to be using "hbox" or "vbox" layouts.
I faced the same problem with the column layout. After some hours of search I discovered that I should define the columnWidth for each component that is placed in the container that has the column layout.
It worked for me.
I have just rechecked the docs for column layout where they say:
ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of columnWidth that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
For me it works only with columnWidth config. (I am using buttons instead of panels in the column container)
i have some text put in title config of dataview in sencha touch mobile app. This dataview is in turn present inside a navigation view, which itself inside a container.
The issue i face here is that i want the toolbar that appears at the top because of using navigation view to have ui:'light' . By default if i use chrome's web inspector tool to view the class that is applied in the DOM it shows that .x-toolbar-dark class is applied to it. How do i change this ui:dark property which applies by default to the toolbar because i have used navigationview.
I am customizing default theme and i have changed the base color of the theme..but due to dark ui being applied to toolbar the darker color is being applied to toolbar.
I know about the usage of custom mixins and then applying those mixins to toolbar we can customize it...but i am not creating a toolbar anywhere here so i cannot apply mixins for it.
Above image shows the difference of color caused due to ui:dark in toolbar. Color on left is original color
The basic question herein is how do you decide which ui style will apply to such toolbars which appear due to use of any component such as navigation view or for ex when you supply a title ?
Below is my navigation view code
Ext.define('MobileApp.view.Offers.OffersNewNavigationView', {
extend: 'Ext.navigation.View',
xtype: 'offersnewnavigationview',
config: {
fullscreen: true,
height: '100%',
autoDestroy: false,
defaultBackButtonText: '',
navigationBar: {
items: [{
align: 'left',
id: 'newSlideBut',
iconCls: 'list',
ui: 'plain'
}
]
},
items: [
{
xtype: 'offersnewdataview'
}]
}
});
my bad..that was silly..!
Just need to add ui config to navigationBar config property in the code...does the job now.
Ext.define('MobileApp.view.Offers.OffersNewNavigationView', {
extend: 'Ext.navigation.View',
xtype: 'offersnewnavigationview',
config: {
fullscreen: true,
height: '100%',
autoDestroy: false,
defaultBackButtonText: '',
navigationBar: {
ui:'light',
items: [{
align: 'left',
id: 'newSlideBut',
iconCls: 'list',
ui: 'plain'
}
]
},
items: [
{
xtype: 'offersnewdataview'
}]
}
});