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); }
}
}
}
Related
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.
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'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 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',
},
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();