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.
Related
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
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'
}]
}
});
I was wondering how I should start making a custom composite component. One that has a border layout, but for which its items show in the center region of the border layout. The following image shows what I'm trying to achieve:
In pseudo-code this would be:
Ext.define('App.custom.ContentView', {
extend: 'Ext.container.Container',
xtype: 'contentview',
layout: 'border',
northCmp: ..., // Custom north region component.
westCmp: ..., // Custom west region component.
centerCmp: ..., // Placeholder for the items it will have.
items: [] // Filled in by each implementation, shown in the center region.
});
Ext.create('App.custom.ContentView', {
layout: 'vbox', // Applies to center region of 'contentview'.
items: [
// Items that go into the center region of the 'contentview'.
]
});
I have looked through the ExtJS source code, and viewed a couple of examples at the Sencha Market; but I have not found an obvious example that does not include a lot of duplicate code.
Any help, or nudge in the right direction, would be greatly appreciated! :)
You should not do that. Please, don't let me be misunderstood, your intentions are good but the implementation you describe will grip in some point in the future. I know because I did something similar when I debuted with Ext. The idea of tuning the component declaration to your tastes/need/whatever may seem like a pleasant simplification... Unfortunately, in practice what you want to do is to give another meaning to an existing construct (items in your case). Here's what it will really bring you:
All code external to your application (that includes Ext, and Ext future releases!) will expect components/container to behave the classic way. That is, that the items of a container are really the items it contains, not the items of one of its children. Unexpected behaviour is to be expected.
You'll inevitably want to customize this component in some ways. You've already started, with the layout of the center region. If you rewrite the way the component work, you'll have to write some kind of config proxy to any feature you want to use. Big burden instead of a little saving. Doesn't worth it.
And finally, in some time you'll have forgotten all about what you've done with this component. And you'll have to debug your code just to understand what it is supposed to do (that is, before debugging the real issues).
Sorry for lecturing... All that being said, that doesn't mean there's not a way to come close to what you want without falling prey to reframing the framework.
Here's how I would do it (fiddle):
Ext.define('My.custom.BorderContainer', {
extend: 'Ext.container.Container'
// xtype is used in Ext3 and Touch... Ext4 uses aliases
,alias: 'widget.contentview'
,layout: 'border'
,items: [{
region: 'north'
,xtype: 'container'
,html: "<h1>Some header</h1>"
,style: 'background-color: lightblue;'
},{
region: 'west'
,xtype: 'container'
,split: true
,html: "<h1>Some menu</h1>"
,style: 'background-color: purple;'
},{
region: 'center'
,xtype: 'container'
}]
/**
* Configuration of the center panel.
*
* #cfg {Object/Ext.Component}
*/
,center: null
,initComponent: function() {
var center = this.center;
if (center) {
if (center instanceof Ext.Component) {
center.region = 'center';
} else {
// never modify a passed config object, that could
// break the expectations of the using code
center = Ext.clone(center);
// apply default config, including the region
center = Ext.applyIf(center, this.items[2]);
}
this.items[2] = center;
}
// else use default config, already in place
this.callParent(arguments);
}
});
Notice how I added a new center config option instead of trying to recycle existing ones (items, layout, etc.). That allows me to put anything I want, customized to the bone, and with usual syntax, in that. Future me and coworkers will probably send me chocolates for that! For example:
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
,center: {
layout: {
type: 'vbox'
,align: 'center'
}
,defaults: {
xtype: 'component'
,margin: 10
,padding: 10
}
,items: [{
html: 'Red'
,style: 'background-color: green;'
},{
html: 'Green'
,style: 'background-color: blue;'
},{
html: 'Blue'
,style: 'background-color: red;'
}]
}
});
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
,center: {
xtype: 'tabpanel'
,tabPosition: 'bottom'
,items: [{
title: 'First Tab'
,html: "I'm empty!"
},{
title: 'Second Tab'
}]
}
});
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
// passing a component instance instead of a config object
,center: Ext.widget('button', {
text: "Foo"
})
});
This looks like basic but I am new to Sencha Touch and still have no idea how to implement this.
I want to create a welcome page where it shows only a logo in the center of the screen. Then after 5 seconds or so, It would load the main page.
Here's my code for the main view:
Ext.define('Sencha.view.Main', {
extend: 'Ext.Container',
xtype: 'mainpanel',
requires: [
'Sencha.view.Opening'
],
config: {
items: [{
xtype: 'opening'
}]
}
});
and this is the code for Opening.js:
Ext.define('Sencha.view.Opening', {
extend: 'Ext.Panel',
xtype: 'opening',
config: {
scrollable: false,
fullscreen: true,
html: '<div id="opening-logo"><img src="resources/images/logo.png"/></div>'
}
});
It should display a logo in the center of the screen. But in fact, it shows nothing. I've used Ext.Panel instead of Ext.Container but it doesn't work.
It works with Ext.navigation.View though, but for a welcome page, it shouldn't have a navigation header on the top of a screen.
What do I do wrong? Oh, and sorry for the bad English.
The common mistake when developping with Sencha Touch is to forget to set the layout of your view. The layout defines how your inner components are gonna be placed on the view. You can find more here
For a view with one component which you want to take the whole screen, you should take the layout fit like so :
Ext.define('Sencha.view.Main', {
extend: 'Ext.Container',
xtype: 'mainpanel',
requires: [
'Sencha.view.Opening'
],
config: {
layout: 'fit',
items: [{
xtype: 'opening'
}]
}
});
Hope this helped
What you need sounds more like a splash screen rather than a view... On an installed app the splash screen gets shown automatically between the start of the app and first view getting loaded...You can configure the startup screen property in your app.js file LINK
Hope it helps...