I have one panel as xtype:'label'
I want to call a function when I click on the text in anchor tag.
can we do this in sencha touch.
Try something like this:
{
xtype: 'label',
html: 'My link'
}
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 new to Extjs,I create a grid panel in extjs, with toolbar. I give a add button, in controller the button name is given. in view, i create a tool bar in create function, not in define. Using alias i create one name also, by using that widget name i used to call in controller, by using button action value give thew function foropen a new, but it notworking. If i use panel within init function in view part means it will not disply any panels.
and my coding is
Ext.create('Ext.toolbar.Toolbar', {
alias : 'widget.toolbar',
renderTo: document.body,
items: [
{
itemId : 'addtab',
text: 'Add',
iconCls: 'add',
action: 'addtab'
}]
})
this is the view part. action here i given as addtab
and my controller is
init: function() {this.control({
'toolbar button[itemId=grid-add]': {
click: function(){
top.addTab(true,"../medias/add","Media","common",0,'add');
}
}
})
button is working.. and my add page is also working fine. but the calling function that is cal by alias is not working. can anyone give the solution.
i want to give the function in controller file only.
thank you..
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
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.
I have a TabPanel with a Tabbar and four panels inside. I want to load the HTML content for the fourth panel with an AJAX call when the panel becomes visible.
The AJAX function fetches the data from the server and places it inside the panel, which uses the panel update function. The problem is how to call this function when the panel becomes visible. A simplified version is:
Pages.Contact = new Ext.Panel({
title: 'Contact',
html: 'test data',
iconCls: 'user',
cls: 'cHome',
activate: function () {
Pages.Contact.update("my ajax data");
}
});
When I go to my panel the body content is not affected. Does anyone know what goes wrong here? I've already tried to replace activate with render and show.
To add event's listeners you need to do
listeners: {
activate: function(){
console.log('activate fired');
}
},
But that's not the event you want to listen. It's better to listen for beforecardswitch on the TapPanel object, example:
listeners: {
beforecardswitch:function(newCard, oldCard, index, anim){
if(index == 3){
//loadJson and update card.
// you may want to use this also
newCard.setLoading(true);
//and after the json request has finished set it to false.
}
}
},
The solution was to use:
beforecardswitch:function(object, newCard, oldCard, index, anim) {
As shown by Ilya139 by with the object parameter as first parameter.
Then the index variable returns the correct cardnumber.