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.
Related
I want to send value from one view to another one, I have a code that's work in ExtJS 6 but not in ExtJS 4.
This is from the first one:
var test = Ext.create('test.text', {
delayedRenderTo: container_id,
id: 'messageBox-' + meta.rowIndex,
viewModel: {
data: {
value: value
}
}
});
and we bind it like this:
Ext.define('test.text', {
extend: 'Ext.Panel',
layout: {
type: 'vbox',
align: 'stretch',
overflow: 'scroller',
},
items: [{
xtype: 'textareafield',
grow: true,
growMin: 30,
growMax: 120,
disabled: true,
fullscreen: true,
bind: {
value: '{value}',
},
fieldStyle: 'font-weight:bold;'
}]
});
What is the alternative for ExtJS 4 ?
ViewModels were introduced in Ext JS 5 which is why it doesn't work in Ext JS 4.
To do it in Ext JS 4, you'd have to find the component (the textareafield in this case) and then execute the setter (setValue for this example). It's all manual in Ext JS 4.
Getting the component depends on many things but the best way is to use ComponentQuery and depends where the code executing this would be. First, you'd have to get your test.text instance and then use comp.child('textareafield'). I cannot give you a silver bullet example as it depends on many factors but using component's down, child, query, up methods a good start and they all have different purposes.
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 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'
}
I have an application in ExtJS that uses a JWplayer for reproduce some videos. But i'm experiencing some weird bugs.
When the page loads it seems that the JWPlayer won't load and then I receive a black line where the player should be displayed.
I am loading the jwplayer inside a extjs panel.
Has anyone experienced this? Is there a way to solve that?
I have created a draggable floating panel with an instance of JW Player inside and it works just find.
Check it out, maybe you are doing something wrong there.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel',{
title: 'Testing JW Player',
width: 480,
height: 300,
floating: true,
draggable: true,
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
id: 'testing'
}],
listeners: {
afterrender : function(component) {
jwplayer('testing').setup({
file: "http://videos-jp.jwpsrv.com/zWLy8Jer/videos/HkauGhRi-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558491aa7db70fc9392eb19e958e847c3e486d709eab9f57d25c86934c4b6091bc427de8ab078578054aaba8384904c4762bd67442c3809470687047",
image: "http://demo.jwplayer.com/homepage/homepage_preroll.jpg"
});
}
}
});
}
});
You can access my fiddle here: https://fiddle.sencha.com/#fiddle/blb
JWPlayer is a nice library by the way, this was the first time I saw it, nice work.
For those whom may have the same issue that I had.
I was placing the player in a panel but I didn't set the height of the component. Since the player takes a while to load I guess that the Extjs just see it as a common div with no size.
I am developing an app with sencha cmd and time of implementing a dataview shows me error and will not let me finish or show me what I should like to show.
I'm desperate for the error, is :
Uncaught Error: [ERROR][Ext.Container#onFirstItemAdd] Adding a card to a tab container without specifying any tab configuration
As much as I searched I have not found the solution, and not understand why I get this error, do not try to make a tab panel, simply a dataview with two fields json, one name and an image below
You help me please to see the error? Thanks
The code from my dataview:
Ext.define('catalg.view.VistaRuta', {
extend: 'Ext.Container',
alias: 'widget.fit',
xtype:'rta',
autoScroll: true,
config: {
items: [
{
xtype: 'dataview',
height: '100%',
styleHtmlContent: true,
width: '100%',
title: 'rta',
layout: {
type: 'fit'
},
inline: {
wrap: true
},
itemCls: 'dataview-item',
itemTpl: [
'<div class="arHeadline">',
' {titulo}',
'</div>',
'<div class="arbyline">',
' <img src="{foto}" />',
'</div>',
],
store: 'rtaStore'
},
{
xtype: 'toolbar',
docked: 'top',
title: 'look 10 rta',
autoScroll: true,
}
]
}
});
A Container may not contain any docked elements, only a Panel can contain docked elements:
Ext.Component: a simple html component (most visibly Ext object inherit from this)
Ext.Container: a component that can contain other components
Ext.Panel: a container that has a header and can contain docked components
most likely you will use a panel with some containers or other components in it
there is also a shortcut for setting docked components: tbar (=top bar) and bbar (=bottom bar)
why do you define an alias and an xtype? you should only use one of them (and the alias fit could easily create a name collision):
if you define a custom component you give it a name in a namespace catalg.view.VistaRuta which is all you need to create this component: Ext.create('catalg.view.VistaRuta')
cause this so long you can define aliases like alias: 'widget.rta' or xtype:'rta' so you can crate this component by using xtype:'rta'
I prefer using the alias cause there are other things like proxy., plugin. or feature. you can create aliases for, xtype is only for components
always choose only one method alias OR xtype so there is no conflict