I am developing a sencha touch mobile app and i have a a tab panel which contains four navigation views as items. I have also assigned iconCls config property to each item so as to show icons for each navigation in bottom for navigation to different views. Below is the code for this tabpanel
Ext.define('MobileApp.view.Offers.OffersPanel', {
extend: 'Ext.tab.Panel',
xtype: 'offerspanel',
config: {
tabBarPosition: 'bottom',
//styleHtmlContent:true,
width: '100%',
cls: 'offersTab',
id: 'offersPanel',
ui: 'light',
items: [{
iconCls: 'new',
xtype: 'offersnewnavigationview'
}, {
xtype: 'offershotdealsnavigationview',
iconCls: 'hot'
}, {
iconCls: 'favourite',
xtype: 'offersfavnavigationview'
}, {
iconCls: 'searchd',
xtype: 'offerssearchnavigationview'
}]
}
});
above tab panel is inside a MainViewContainer , which itself is inside Main.js container. Code for both files is shown below
Ext.define('MobileApp.view.MainContainerView', {
extend: 'Ext.Container',
xtype: 'mainContainerView',
requires: [
'Ext.TitleBar'
],
config: {
layout: 'fit',
// shadow for the left edge
style: 'box-shadow: rgba(0, 0, 0, 0.8) 0 0.2em 0.6em;',
/*
* This is the main view used to switch view or add view
* when selecting from sidebar menu
*/
items: [{
xtype:'offerspanel'
}]
}
});
Ext.define('MobileApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
config: {
layout: 'fit',
//fullscreen: true,
items: [{
xtype: 'sidebar'
}, {
xtype: 'mainContainerView'
}]
}
});
I can see in the DOM that markup for the icon and tab panel item is present but it is hidden by sencha touch and .x-item-hidden css class get applied to it somehow (i can't figure out why). Below is image showing the dom for tab panel item
the tabpanel view with hidden items (4 tab items with icons should be present here)
i got icons to appear correctly by using fullscreen:true config property in each of the navigation views inside OffersPanel view file.
Technically i am yet to find out how did that solve the issue but as of now it is working correctly.
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 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'
}]
}]
});
I have create a floating panel above a panel and have added carousel to the floating panel.
Now the problem is that while carousing i can see all the items that were added. I want only one item to get displayed on the floating panel while others to be hidden and not be displayed outside the floating panel. How can i achieve this?
Thanks in advance.
Code:
var App = new Ext.Application({
name: 'CarouselDemo',
useLoadMask: true,
launch: function () {
overlayView.show();
}
});
var overlayView = new Ext.Panel({
floating: true,
centered: true,
styleHtmlContent: true,
width:600,
height:600,
items: [
{
xtype : 'carousel',
ui : 'light',
direction: 'horizontal',
items: [
{ html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>'
},
{ html: 'Card #2'
},
{ html: 'Card #3'
}
]
}]
});
I use ExtDesigner designed a window, and the generated json is like:
{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [
{
xtype: 'form',
bodyStyle: 'padding: 10px',
title: '',
items: [
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '名称'
},
{
xtype: 'radiogroup',
anchor: '100%',
fieldLabel: '广告类型',
items: [
{
xtype: 'radio',
boxLabel: '文字'
},
{
xtype: 'radio',
boxLabel: '图片'
}
]
}
]
}
]
}
I copied it but I don't know how to use it. I don't find a method to convert it to an extjs component. How to do it?
PS: I use extjs 2.2
There are two ways to create an ExtJS component.
create the component explicitly, for example: new Ext.Window({...});. This way you get the component right away, meaning the event listeners, the extra methods...etc.
the second way is lazy loading, which is by specifying the xtype of a component in a plain javascript object. This is exactly what you have.
To make the second way work, you need to include your xtype-javascript-object in an ExtJs container, and the container will know how to render it at the appropriate time.
for example :
Ext.onReady(function(){
new Ext.Viewport({
layout : 'fit',
items : [{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [...]
}]
});
});
Think you are looking for something like this. This will show your window in a pop up.
var win = new Ext.Window({
width:400
,id:'autoload-win'
,height:300
,autoScroll:true
});
win.show();