I am working on extjs for first time is it possible to have border layout inside card layout.If possible please provide me a sample example.
Coding:
Ext.define('app.view.main'{
extend: 'Ext.panel.Panel',
xtype: 'mainview',
layout: 'border',
border: false,
items:[
{
xtype:'panel',
region:'north',
......
.........
},
{
xtype:'panel',
region:'west',
......
.........
},
{
xtype:'panel',
region:'center',
items: [
{
xtype:'panel',
layout:'card',
items:[{
xtype: 'panel',
region: 'center',
margin: 10,
layout: 'border',
items:[{
xtype:'panel',
region:'center',
......
.........
},
{
xtype:'panel',
region:'south',
......
.........
}]
}]
}
]
}
]
});
In this the items inside card layout is not working if i remove the layout border then the panels are displayed.
It's possible. I've created your basic layout in the fiddle. The general structure seems to be border > card > border. I've added panel titles so that you can get a feel for where each panel is displayed. A couple things to note:
region: 'center' near margin: 10 within the card layout does nothing.
You've nested more than necessary. The center panel can just have card layout directly, rather than having one child panel with the card layout. The power users within the ExtJS forums always suggest flattening the layout as much as possible. I suspect this layout could be simplified more, depending on the needs of your application
Here's what the code looks like:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: 500,
title: 'testing',
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
title: 'outer north',
height: 60
}, {
xtype: 'panel',
region: 'west',
title: 'outer west',
width: 60
}, {
xtype: 'panel',
region: 'center',
title: 'outer center',
layout: 'card',
items: [{
xtype: 'panel',
title: 'card 1',
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'inner center'
}, {
xtype: 'panel',
region: 'south',
title: 'inner south'
}]
}, {
xtype: 'panel',
title: 'card 2'
}]
}]
});
Related
I have a portal (attached image) in which when I click a button I get some images in a panel (right side). Now I want when I click on each of this image to get an alert box with the image id. How can I access this? Till now I have done everything using jquery and now I am in the process of migration. This is part of my code:
items: [{
xtype: 'tabpanel',
width: 600,
activeTab: 0,
flex: 2,
layout: {type: 'fit'},
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScroll:true,height:500 }],
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScroll:true,height:500 }]
}]
}]..
You can add listener to an image element, when you append it
{
xtype: 'image',
src: 'some-path',
listeners: {
el: {
click: function() { alert(this.id); }
}
}
}
I have an app that is comprised of a tab bar layout with multiple pages, one of the pages is a list view and one is a "detail view" which is basically a panel.
The panel won't scroll on mobile devices. It works fine on Desktop (Chrome/Safari) but won't scroll on mobile devices. I've tested it on Safari / Chrome on iOS, and Chrome on Android.
The demo of the app is here: simbro5-80.terminal.com
The source code is here: github.com/simbro/Geograph
Here are some snippets:
Main View (extends Ext.tab.Panel) :
{
title: 'News',
layout: 'fit',
iconCls: 'news',
items: [
{
xtype: 'itemsListView'
}
]
},
{
title: 'Item Details',
layout: 'fit',
hidden: true,
items: [
{
xtype: 'itemDetailView'
}
]
},
Detail View:
Ext.define('Geograph.view.ItemDetailView', {
extend: 'Ext.Panel',
xtype: 'itemDetailView',
config: {
title: 'Details',
//layout: 'fit',
tpl: [
'<img src="{thumb}" alt="" />',
'<h2>{name}</h2>'
],
scrollable: {
direction: 'vertical'
},
styleHtmlContent: true,
data: null,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Item Details',
items: [{
ui: 'back',
text: 'Back',
id: 'backBtn'
}]
}]
}
});
P.S. I'm using Sencha Touch 2.4.1
Try changing to
scrollable: true
Just seeing if explicitly setting this makes any difference for you
I'm new to Sencha Touch 2 and would like to place an HTML tag on top of the page and an xtype: formpanel below that. Any clue how to do this? Do I have to place both of these elements inside another xtype?
Thx in advance.
-> Screenshot
The code looks as follows (some stuff came before the code of course):
xtype: 'carousel',
direction: 'horizontal',
//Will be applied to every object in the array by default
defaults: {
styleHtmlContent: 'true',
scrollable: true
},
items: [
{
cls: 'configurator-item',
html: '<h2>Demo heading</h2>',
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true
},
items: [
{
xtype: 'textfield',
name: 'locationOfHouse',
label: 'Demo',
placeHolder: 'Demo?'
},
{
xtype: 'spinnerfield',
name: 'numberOfPeople',
label: 'Demo',
minValue: 0,
maxValue: 99,
increment: 1,
cycle: true
}
]
}
]
},
You can implement this using 2 xtypes.
(1) xtype = panel or container to display the html or top.
(2) xtype = fieldset for the middle content.
Once this sencha app renders in the browser, it will be converted into series of divs and spans. So, 1# will give you more control to manipulate the text.
I have implemented the same for you on senchafiddle, you can have a look,
http://www.senchafiddle.com/#PHRyc
Hope it helps.
Yes, thanks I got it meanwhile like this:
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'panel',
docked: 'top',
html: [
'<h1>Demo heading</h1>'
},
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true,
labelAlign: 'top',
},
items: [
{
xtype: 'textfield',
name: 'Demo',
label: 'Demo',
labelWidth: '33%',
placeHolder: 'Demo'
}
(..and closing all the brackets above..)
This is an issue I've had a hard time researching and tracking down. When loading the following panel in a view, scroll bars appear on each tab title (not one long scroll bar for all of the tabs, but individual tab titles). It's not a huge issue for me since I'm on Mountain Lion with small scroll bars, but other users on older OS X versions have the huge blue scroll bars that block the entire tab title.
I'll post a screenshot when I get one, but here's the code:
Ext.define('App.view.case.CasePanel', {
extend: 'Ext.panel.Panel',
alias : 'widget.case-panel',
title : 'Edit Case',
layout: 'fit',
border: false,
autoScroll: true,
constrainHeader: true,
initComponent: function() {
this.items = [{
xtype: 'panel',
autoScroll: true,
layout: 'border',
items: [{
region: 'west',
xtype: 'case-edit-case-info',
split: true,
border: true,
width: 300
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
autoScroll: true,
border: false,
defaults: {border:false, bodyStyle:'padding:5px'},
items: [{
title: 'One',
xtype: 'case-edit-tab-one' // these aren't the actual tab names, but you get the idea.
},{
title: 'Two',
xtype: 'case-edit-tab-two'
},{
title: 'Three',
xtype: 'case-edit-tab-three'
},{
title: 'Four',
xtype: 'case-edit-tab-four'
},{
title: 'Five',
xtype: 'case-edit-tab-five'
},{
title: 'Six',
xtype: 'case-edit-tab-six'
},{
title: 'Seven',
xtype: 'case-edit-tab-seven'
}]
}]
}];
this.bbar = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
action: 'cancel'
}];
this.callParent(arguments);
}
});
Any ideas as to why it's doing this?
(Mac OS X, latest Chrome version)
Try to remove autoScroll from the first panel:
initComponent: function() {
this.items = [{
xtype: 'panel',
autoScroll: true,
layout: 'border',
...
}]
}
This question is pretty downright dumb and I might have stumbled upon a bug but I need to center my searchfield in my navigation bar in Sencha Touch and I just can't make it work. This is my code:
Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',
xtype: 'mynav',
requires: [
'Ext.field.Search', 'Ext.Button'
],
config: {
fullscreen: true,
navigationBar: {
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
align: 'right'
}
]
},
items: [
{
title: 'MyNav',
xtype: 'list',
fullscreen: true,
grouped: true,
store: {
fields: ['name', 'html'],
sorters: 'name',
data: [
{name: 'Alfa', html: '<p>alfa</p>'},
{name: 'Beta', html: '<p>beta</p>'},
{name: 'Gamma', html: '<p>gamma</p>'},
{name: 'Mupp', html: '<p>mupp</p>'},
{name: 'Tupp', html: '<p>tupp</p>'}
],
grouper: {
groupFn: function(record) {
return record.get('name')[0];
},
indexBar: true
},
},
listeners: {
select: function(view, record) {
var test = Ext.create('Ext.Panel', { fullscreen: true,
title: record.get('name'),
layout: {
type:'vbox'
},
items: [
{
xtype: 'panel',
html: record.get('html')
}
]
});
var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
mainnav.setActiveItem(test);
}
},
itemTpl: '{name}'
}
]
}
});
Focus on the actual navigation bar thing, the other stuff is just code pasted (and I modified it somewhat), I'm pretty sure this is a bug though.
Thanks in advance!
you can try using a toolbar docked in the bottom of the page with the search field centered, I don't know why but the navigation bar ignores the centered property.
Something like this:
config: {
fullscreen: true,
navigationBar: {
},
items: [
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
centered: true
}
],
},
{
title: 'MyNav',
xtype: 'list',
If you need the search field on the top of the screen you could try hiding the navigation bar with hidden: true and changing the docked property in the toolbar.
Hope it helps!
A better answer (for me) that just centres whatever you have added to the navigation bar, is:
this.getNavigationBar().leftBox.setCentered(true);
You will probably want to manage the centred-ness of the navigation bar for each page, though.
I used
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
This would be just under the docked: 'bottom', line is the example above.
Regards
Jacko
Whenever I find it difficult to center a desired field, I just add a spacer before and after, combined with a flex for the item I want to center, it never fails. In this case:
items: [
{
xtype: 'spacer',
},
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
flex: 0.7
},
{
xtype: 'spacer',
},