controller error container Sencha - extjs

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

Related

Sencha Extjs6 - Modern toolkit - NestedList inside an Ext.Menu

I'm quite new to Sencha Extjs6. I'm making a universal app (focusing on the mobile right now) and I'm trying to add a NestedList into a Menu. I have the Menu sliding in from the left and I can display the NestedList, but when I drill down the items in the list get mixed up? I.e. It'll show the parent item as well as its children. If I click back to the root then it'll still display all the leaf nodes etc when it should just show the root item. There's no slide animation between the items either so it makes me think it's not currently possible to use it this way?
When I create the NestedList in isolation (not added to an Ext.Menu) then it works as expected (similar to the KitchenSink example).
This is what I have thus far:
MenuList.js
Ext.define('mobile.view.menu.MenuList', {
extend: 'Ext.NestedList',
xtype: 'menulist',
store: 'mobile.store.menu.MenuListStore',
controller: 'listcontroller',
displayField: 'text',
title: 'Menu',
width: '100%',
itemId: 'menulist',
layout: 'fit',
styleHtmlContent: true,
useTitleAsBackText: false,
backText: ' ',
scrollable: true
});
NavigationMenu.js The nested list is added to this.
Ext.define('mobile.view.menu.NavigationMenu', {
extend: 'Ext.Menu',
xtype: 'navigation',
controller: 'navigation-controller',
renderTo: document.body
...
...
...
getMenuCfg: function(side) {
var me = this;
return {
items:[{
xtype: 'menulist'
}, {
text: 'Log out',
textAlign: 'left'
...
}]
}
}
MenuListStore.js
I have my own data, but I tried it with the carregions example and still didn't change the behaviour.
Ext.define('mobile.store.menu.MenuListStore', {
extend: 'Ext.data.TreeStore',
config: {
model: 'mobile.model.menu.MenuItem',
root: {},
proxy: {
type: 'ajax',
url: 'resources/carregions.json'
}
}
});
MenuItem.js
Ext.define('mobile.model.menu.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
In a nutshell it works as a standalone component when added to the viewport, but not when I add it as a component into a menu. Any help or guidance would be fantastic. Thanks a lot guys. :)
I managed to solve it. It seems that removing layout: 'fit' got it working.

ExtJs 5.0.1 "Layout run failed" using column-layout

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)

Changing default ui value in toolbar from dark to light

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'
}]
}
});

Nothing displaying on starting app sencha touch

I am using sencha 2.3.1 and the following code (in app.js), to display some html content on page. But nothing is being displayed. Please tell where I am wrong.
Ext.application({
name: 'Sencha',
requires: ['Ext.tab.Panel'],
launch: function() {
//The whole app UI lives in this tab panel
Ext.Viewport.add({
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// This is the home page, just some simple html
{
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
html: [
'<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>Building the Getting Started app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")
}
]
})
}
});
Did a quick check in Sencha Fiddle, and your content seems to display.
https://fiddle.sencha.com/#fiddle/48m
However, I see you attached a cls property to this tabpanel, perhaps this is causing your problem.
Also, often things do not show up in Sencha because the height of the component is zero. Open up your DOM inspector and find your tabpanel and child elements and make sure they have a height of greater than zero. You may need to define a height, or use a different layout such as fit.

Ext-JS 4 border layout inside card layout

I am creating an application with Ext-JS 4.
Cards:
1.) Login card
2.) Application card
Application card has a border layout.
When I show them separately, they work but when I put them in a Viewport together, they don't work.
Here is my Viewport:
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'card',
items: [
{
xtype: 'loginform',
},
{
xtype: 'mainapp'
}
]
});
Here is a part of my Login card:
Ext.define('Sabrina.view.login.Form' ,{
extend: 'Ext.form.FormPanel',
alias : 'widget.loginform',
name: 'loginform',
frame: true,
title: 'Login',
bodyPadding: '5px 5px 0',
width: 350,
...
Here is a part of my Application card:
Ext.define('Sabrina.view.Main', {
extend: 'Ext.panel.Panel',
alias: ['widget.mainapp'],
layout: 'border',
items: [
//here I have 'west' and 'center' regions
]
I've created the same components in a different application separately and they work but here not. Do I have to put something more if I want a border layout inside card layout?
I'm getting this:
Uncaught TypeError: Cannot call method 'substring' of undefined
Thank you. :)
viewport can only handle one element, while cardlayout manages many with only one active. Make the only element of the viewport a container with cardlayout and give the viewport a fitlayout, that should work.
Your error sounds more like unknown xtypes. Anyway, try the descriped layout, maybe the error is gone.
Why don't you show a login window as modal? Using a card layout for just login and then the actual app is overkill in my opinion.

Resources