I have a controller function for my list that is being called when the list item is tapped, within this function I am trying to update a button component's text as follows:
var button = this.getPopupButton();
//reference popupButton is set within controller
button.setText('Test');
The function seems to work, and console.info(button.getText()); is reporting the update, but within the UI the text remains the default as set in the config.
Is this a bug? Or am I doing something wrong here?
These buttons are within a segmented button object:
items: [
{
xtype: 'segmentedbutton',
flex: 1,
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 2,
id: 'PopUpButton',
text: 'Pop up test!'
},
{
xtype: 'button',
flex: 1,
id: 'Mini',
ui: 'action',
text: 'Mini test!'
}
]
}
]
Update: It might help to know that these buttons are segmented buttons within a datalist toolbar, see complete code below:
Ext.define('TestApp.view.ItemList', {
extend: 'Ext.dataview.List',
alias: 'widget.ItemList',
config: {
loadingText: 'Loading items...',
store: 'ItemStore',
cls: [
'ItemList'
],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{itemData}</div>',
),
plugins: [
{
xtype: 'component',
refreshFn: function(plugin) {
//console.info('pull to refresh!');
var store = plugin.up().getStore();
console.log(store);
},
itemId: 'PullToRefresh',
loadingText: 'Loading...',
pullRefreshText: 'Pull down to refresh...',
releaseRefreshText: 'Release to refresh...',
snappingAnimationDuration: 200,
type: 'pullrefresh'
},
{
autoPaging: true,
loadMoreText: 'Load more...',
noMoreRecordsText: 'No more data in feed',
type: 'listpaging'
}
],
items: [
{
xtype: 'toolbar',
docked: 'top',
id: 'MediaToolbar',
ui: 'light',
zIndex: 3,
items: [
{
xtype: 'button',
flex: 1,
cls: 'SourceSelectButton',
id: 'SourceSelectButton',
minWidth: '',
width: 83,
iconCls: 'ItemSource1',
text: ''
}
]
},
{
xtype: 'toolbar',
docked: 'top',
height: '45px',
id: 'FeedSelectorBar',
ui: 'light',
zIndex: 3,
items: [
{
xtype: 'segmentedbutton',
flex: 1,
id: 'FeedSelectorButtons',
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 2,
id: 'PopUpButton',
text: 'Pop up test'
},
{
xtype: 'button',
flex: 1,
id: 'TesterButton',
ui: 'action',
text: 'Latest'
}
]
}
]
}
]
}
});
Update #2: After further testing in the console using Ext.ComponentQuery.query() I have found that I can manipulate all buttons in my application EXCLUDING the ones placed within the dataview list/toolbar.
Try following changes, this is working for me:-
Give 'id' to your segmented button.
{
xtype: 'segmentedbutton',
id: 'hii', // give id to your segmented button
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
id: 'PopUpButton',
text: 'Pop up test!'
},
{
xtype: 'button',
id: 'Mini',
ui: 'action',
text: 'Mini test!'
}
]
}
Use this code inside controller on 'itemtap' of your list.
var button = Ext.getCmp('hii'); // use your segmented button id here
button.getAt(1).setText('Test');
This problem was solved by moving my Ext.dataview.List into a Ext.panel container. This seems to be a bug with sencha touch 2.0.1.1. Any elements that I manipulated within my dataview.List toolbar component would report as updated in the console but would not show as updated in the UI. The same problem occured in both Chrome, Safari and on an Android device packaged as a phonegap project.
Related
When I try to put a container as a component in the textfield (according to Button inside of an input field Sencha Touch 2.0) my app crashes. The code below is for you to get an idea of the context, im didnt double check the syntax in the post but when I comment out the last item it works fine . I think it is the xtype: 'container' that generates the error (the error is "undefined function"). What am I doing wrong here? Im so bad at this...
Ext.define('myapp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
},
})
You are right. The problem is the container inside the textfield.
When a textfield is generated and initialized it will set its original value. Since you have changed the component to container and it's not input anymore you get the problem. The initialization process calls the getValue methode of the component. Unfortunately container does not have one and that's rises the exception.
The solution to this problem is quite easy: create your custom textfield and override its getValue method.
Ext.define("MyApp.field.ButtonField", {
extend: "Ext.field.Text",
xtype: "buttonfield",
config: {
label: 'Textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
}
},
getValue: function () {
this.getComponent().down('textfield').getValue();
},
setLabel: function ( label ) {
this.getComponent().down('textfield').setLabel( label );
}
});
Since it has an xtype you can use it as follows:
Ext.define('MyApp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container',
'MyApp.field.ButtonField'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'buttonfield',
label: 'blub'
}
]
}
});
You have to override some more methods (e.g. setValue) if you want to use the buttonfield like a normal field. So you delegate all textfield method calls to the wrapped textfield. But that should be easy now.
I need to create an anchored popup window containing buttons which when clicked a new view is created. Please refer to screenshot below (taken from the yelp mobile app). I have not been able to find examples of this functionality - thanks
I think that what you are looking for is really just a floating panel.
See for instance the sencha docs and their example using the showBy method.
Hope that this helps you.
I don't knw how to create an anchored popup window but you can try implementing Action Sheet in Sencha Touch-2. It is not anchored but it can contains buttons on which you can provide functionality.
This issue can be resolve by calling a panel inside a container.
//Add container1.js in view
Ext.define('Sencha.view.container1', {
extend: 'Ext.Container',
alias: 'widget.container1',
xtype: 'container1',
//fullscreen: true,
config: {
scrollable: true,
height: 50,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
{
xtype: 'button',
ui: 'confirm',
text: 'Back',
itemId: 'button113',
id: 'rightButton',
handler: function () {
var sh = Ext.create('Sencha.view.panel1', {
extend: 'Ext.Panel',
fullscreen:true,
});
sh.show();
}
}
]
}
]
}
});
//Add panel1.js also in View
Ext.define("Sencha.view.panel1", {
extend: "Ext.Panel",
alias: "widget.panel1",
config: {
html: 'Floating Panel',
//left: 0,
//padding: 50,
items: [
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Edit Bussiness',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Add Photo',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Add BookMark',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Check In',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Write Review',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Make Reservation',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Cancel',
handler: function() {
this.up('panel').hide();
}
},
],
listeners: [
{ hide: { fn: function(){ this.destroy();} }},
]
}
});
//App.js
Ext.application({
name: 'Sencha',
controllers: ['Main'],
views: ['container1', 'panel1'], //add all the view files here which you wants to call on any other panel so that the instance of it will be created.
stores: [],
models: [],
launch: function() {
Ext.Viewport.add({
xtype: 'container1'
});
}
});
This work for me and will give you the same output. Moreover, on cancel Button it will hide the panel Hope this will help you.
Thanks
What I'm trying to do here is to use a card layout within the panel of a carousel. But it seems impossible that it's not common to create a card layout and the carousel is actually one of the card-layout-like container. So I wonder if it can be achieved in Sencha Touch 2.
Here is my main view, a plain carousel container:
Ext.define("myapp.view.Main", {
extend: 'Ext.carousel.Carousel',
config: {
defaults: {
styleHtmlContent : true
},
activeItem: 0,
items: [
{
xtype: 'firstview'
},
{
xtype: 'secondview'
},
{
xtype: 'thirdview'
}
]
}
});
and here is my 'firstview', which extends the Ext.Panel as part of the carousel container:
Ext.define("myapp.view.Compose", {
extend: 'Ext.Panel',
xtype: 'firstview',
requires: [
'Ext.form.FieldSet',
'Ext.TitleBar',
'Ext.form.Text',
'Ext.Button'
],
config: {
styleHtmlContent: true,
scrollable: true,
layout: 'vbox',
items: [
{ // title bar
xtype: 'titlebar',
docked: 'top',
title: 'a Title here'
},
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{ // controll button set - to change view for composing different kinds of messages
xtype: 'segmentedbutton',
allowDepress: true,
allowMultiple: false,
items: [
{
text: 'subview-1',
pressed: true
},
{
text: 'subview-2'
},
{
text: 'subview-3'
}
]
}
]
},
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
config: {
height: '100%',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
}
]
}
});
as you can see, there is a card layout within this panel. But as a matter of fact nothing is not going to display.
Of course, I can find another way out to achieve some thing similar here, but I just want to know is it impossible to embed a card container into a card-layout-like container, for example, 'tabPanel' or 'carousel' in sencha touch 2?
Hey in the Compose widget replace the the part with id:'id_compose_card'
with this
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
flex: 1,
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
I just took out the parts inside the config object and put them outside. Im getting this feeling that u cant nest a config inside another config object for a class definition. A lot of people are having issue and this seems to be the problem. You might want to confirm this on their forum.
Then I also replaced the attribute
height: '100%',
with this
flex:1
This will tell the vbox layout to make your component fill the remaining space.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
items: [
{
xtype: 'button',
docked: 'right',
height: 29,
hidden: true,
ui: 'back',
text: 'back'
}
]
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
grouped:true,
pinHeaders:false,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
}
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
My Store
I use some codes in my store
sorters:'id',
grouper:function(record) {
return record.get('id')[4];
When i write grouped:true into the list config , app doesn't run. I don't understand the reason.
I want to see same result like kitchensink example userinterface/list/disclosure section.
add this configartion in your store
groupField:'label'
i'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...