I have a panel with a titlebar which already have a two buttons, one on the left and another on the right of the bar. Now I would like to know how to add a panel (or else) to the center of the bar.
This panel need to have a picture and se string inside.
This is what I do for the moment but the panel is displayed on the right of the left button and I can't figure out how to put it in the middle of the titlebar.
this.getTitlebar().add([{
xtype: 'panel',
layout:'hbox',
items:[{
xtype:'img',
width:32,
height:32,
src:data.image.small.url
},{
html: data.key,
style:'color:#FFF'
}]
}]);
[UPDATE] : centered: true
I tried to add centered: true to my panel config but it didn't work, it actually got worse
from this
to this
Thanks
don not need to add the "spacer"
items: [
// your_first_button(default:left)
{},
// your_central_panel
{centered: true},
// your_second_button
{right: 0}
]
Hope this helps.
To align your items as described, simply use this prototype:
items: [
{your_first_button},
{xtype: 'spacer'},
{your_central_panel},
{xtpye: 'spacer'},
{your_second_button},
]
Hope this helps.
If you're trying to achieve the same thing, don't use a Ext.Titlebar but use a Ext.Toolbar instead.
Things like {xtype:'spacer'} don't work in Titlebars...
Did you try insert method of the component?
You can have something like this
yourComponent.insert(index,componentTobeAdded);
And after adding it, call the component layout of the Toolbar to show the panel added.
Related
Ext.field.Select by default comes with the buttons: "Done" and "Cancel", but I need to add a third button in the middle, an "Add" button, that allows the user to insert a new option if what he needs is not in the options.
Is there a way to do this in Sencha Touch?
Thanks
Yes, it is possible. First of all, see these two documentation pages toolbar, defaultPhonePickerConfig to learn how to add custom buttons to picker toolbar.
As an example:
{
"xtype": "selectfield",
// also there is defaultTablePickerConfig
"defaultPhonePickerConfig": {
"toolbar": [
{
xtype: 'button',
text: 'Add',
align: 'left',
handler: function(){}
}
]
}
}
I am a newbie in sancha touch 2, Playing with kitchensink example that comes with sancha touch sdk kitchensink/index.html#demo/inlinedataview
UI for Inline Dataview
View
/* Here we are adding a dataview to a container
* which(dataview) contains images.
*/
Ext.define('Kitchensink.view.InlineDataView', {
extend: 'Ext.Container',
requires: ['Kitchensink.model.Speaker'],
config: {
layout: 'fit',
items: [{
xtype: 'dataview',
scrollable: true,
inline: true,
itemTpl: '<img src="{photo}">',
store: 'Speakers'
}]
}
});
Question
I want to animate those images while they are being added to dataview in a way that they(each one of them individually) seems to fading in at a random place before showing the upper view.
Similar to http://boedesign.com/demos/jsquares/ example1
Sancha Doc Reference or A hint or how to do, will do it, but if you can paste some reference code that would be great.
I saw that no one replied to this in 8 months, and it still comes up in google:
so thought i provide a simple solution.
in your dataview override the doRefresh function
doRefresh: function ()
{
this.callParent(arguments);
this.animateItems();
},
then in your customer after-function (this.animateItems())
call:
var viewItems = this.getViewItems();
then roll some animations on them :)
i've created a plugin that attempts to simplify this.
hope it can help someone: http://sunnyjacob.co.uk/blog/animating-items-in-a-sencha-touch-dataview/
S.
How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.
Should I implement this:
Straight into index.html
Somehow add it in the view which holds the menu as well
Some other magical way
The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
});
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
Ext.create('Ext.Panel', {
html: 'Floating Panel',
left: 0,
padding: 10
}).showBy(button);
For your top view, I would use something along the lines of a Ext.TabPanel though.
http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel
I would like to have images displayed in a horizontal list.
This is what I've done so far :
var list = Ext.create('Ext.List',{
store: store,
itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
inline:true,
scrollable: {
direction: 'horizontal',
directionLock: true
}
});
My store has 5 items, but the list only display two (because the screen is not large enough to display more than two images).
I tried to solve this problem by setting the width of my list to 1000px like so :
style:'width: 1000px',
All the items are now shown, but now, the problem is the list is not scrollable anymore. I can't go further than the width of the screen.
[UPDATE]
I've tried with a hbox panel but nothing is showing. Any idea why ?
var hbox = Ext.create('Ext.Panel',{
layout:'hbox',
style:'background-color:red;',
data: [
{name: 'Jamie', age: 100},
{name: 'Rob', age: 21},
{name: 'Tommy', age: 24},
{name: 'Jacky', age: 24},
{name: 'Ed', age: 26}
],
tpl: new Ext.XTemplate('{name}')
});
this.setItems([hbox]);
I just see a red background?
Did you try passing an object instead of just true for the 'inline' config:
var list = Ext.create('Ext.List',{
store: store,
itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
inline: { wrap: false },
scrollable: {
direction: 'horizontal',
directionLock: true
}
});
In the docs, they mention this avoids your wrapping problem and enables horizontal scrolling:
http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.DataView-cfg-inline.
I did not try it though.
Hope this will work for you.
Ok, I finally found this working example which was quite helpful :
http://dev.sencha.com/deploy/touch/examples/production/list-horizontal/index.html
You can also find it in the examples/production/list-horizontal when you download Sencha Touch 2
It's not a really good idea (or might be impossible) to create a horizontal Ext.List
If you tends to produce something like "image slider" or "carousel", then it would be better if you create an Ext.Carousel or something that is more customizable, hbox. Ext.Carousel is easy and well-documented, so I will talk a little bit more about hbox.
The idea is, first you create an empty hbox with fixed height. Then, you can eventually add items to it. Each item is whatever you like, for example: Ext.Image in your case. Each of your hbox item is a component then you can easily customize it the way you want.
Hope this idea helps.
I’m newbuy on Sencha framework. I read the partial guidebook which I have found on the website to try to create some panels with tabs and buttons.
I would like to be able to understand how to create a my “events.js file” where putting the touch gesture event and calling them back into a mean myJS.js file. Particularly, in “dockeditems” which I have created for my mean panel, I have declared a tabPanel, some buttons and a panel where I have specified, as ‘html’, a .svg design file containing a planimetry. I wish I could apply ONLY on this last panel, containing this planimetry (for scaling by fingers), the TOUCH gesture events as PINCH, TAP, etc… How can I do this ?
Could you let me see a very simple example of the way to use a touchEvent.js file (which I have to implement) and how to connect it to the mean file containing the EXT.SETUP( …. onReady…..) ?
Something like that:
(myEventTouch.js)
myHandler = function() {“Pinching”};
(myPrincipalFile.js)
Ext.setup ({ onReady: function(){
new Ext.panel({ dockeditems: myitems })
}
var dockedItems = [{
xtype: 'toolbar',
title: 'Planimetry',
ui: 'dark',
dock: 'top',
items: “ some buttons “,
},
{
id:'html',
dock:'left',
width: '75%',
// HERE THERE IS THE CRITICAL POINT
html: '<object data="planimetry.svg" style="width: 100%; height: 100%" type="image/svg+xml" id="plan"/>',
handler: myHandler // HERE I WISH CALL BACK MY HANDLER
},
{
dock:'right',
width:'25%',
xtype:'tabpanel',
items: [“something”]
})
Thanks in advance :)
p.s.
sorry for my english (i'm italian :P)