I have sencha touch 2 list , i want to add toolbar to the left of each list item . Is it possible if so how? I referred this link : http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2, But in my case i have to add toolbar .
It must be like :
toolbar-list item text-closure icon
toolbar-list item text-closure icon
toolbar-list item text-closure icon
toolbar-list item text-closure icon
You can look DataItem documentation. Here the code of example:
Ext.define('MyDataItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.mydataitem',
config: {
padding: 10,
layout: {
type: 'hbox'
},
defaults: {
margin: 5
},
items: [{
xtype: 'button',
text: 'Val1'
}, {
xtype: 'component',
flex: 1,
html: 'val2',
itemId: 'textCmp'
}]
},
updateRecord: function(record) {
var me = this;
me.down('button').setText(record.get('val1'));
me.down('#textCmp').setHtml(record.get('val2'));
me.callParent(arguments);
}
});
DataItem extends from container. So you can add any component on it. Included Toolbar. Add your toobar in the items array with option docked: 'left'.
Related
I'm trying to create a view, which has essentially a list where each row has text and 2 buttons aligned right. The text of the buttons will always be the same - only the text of the row will need to be fetched from the store.
I saw this question but couldn't get the proposed solution to work. I definitely have records in my store, but the dataview does not display.
A simplified version of my code:
My main view:
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
...
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'middle'
},
items: [
...
{xtype: 'mylist'}
...
]
...
}
...
});
DataView:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.DataView',
alias: 'widget.mylist',
requires: ...,
config: {
useComponents: true,
store: 'my-store',
defaultType: 'listitem'
}
});
DataItem:
Ext.define('MyApp.view.ListItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.listitem',
config: {
layout: ...
items: [{
xtype: 'component',
itemId: 'description',
html: '',
flex: 2
},
{
xtype: 'button',
text: 'a button',
itemId: ...,
flex: ...
},
{
... another button
}]
},
updateRecord: function(record) {
...
this.down('#description').setHtml(record.get('description'));
// record.get('description') does give me an undefined value
}
});
Assuming my stores and models are set up properly, what could the problem be?
Alternatively, maybe I should just use a standard list, but set the width to <100%, and just add 2 buttons to the right for each row. Though I'd rather get the current approach to work...
Edit:
Ended up using the dataMap approach.
My DataItem now looks like:
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
flex: 1
}
},
applyDescription: function(config) {
return Ext.factory(config, Ext.Component, this.getDescription());
},
updateDescription...
Basically like this.
I see the labels now, but am stuck on how to get a button in there. Since I don't want to link it to a store, I don't want to put it in the dataMap. I tried putting it in items, but to no avail.
Edit 2:
Well, getting the button to display was easier than I thought. It's just a repeat of what I did with the label, but without including it in the dataMap - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...
The last issue I need to resolve is, how to uniquely identify them. I want a listener on the button, but somehow pass in the record into the handler.
My solution for getting a button in a dataview without linking it to the store. It's actually, somewhat unsurprisingly, similar to this blog post.
view - ListItem.js
...
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
cls: ...,
flex: 4
},
myButton: {
cls: ...,
text: 'Button!',
flex: 1
}
},
applyDescription, updateDescription (same as in the question),
applyMyButton: function(config) {
return Ext.factory(config, Ext.Button, this.getMyButton());
},
updateMyButton: function(newButton, oldButton) {
... same logic as the other update method
}
In my dataview:
...
config: {
itemId: ...,
store: ...,
useComponents: true,
defaultType: 'listitem',
width: '100%',
flex: 1,
listeners: {
itemtap: function(dataview, index, element, evt) {
var store = dataview.getStore();
var record = store.getAt(index);
...
}
}
}
...
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
I have implemented a list view for different colors in Sencha Touch.
And implemented a item tap method to push the view in container.
And Implemented 4 views for each 4 color RedPage.js, WhitePage.js, yelloPage.js, GreenPage.js.
View:
{
xtype: 'list',
id : 'ColorsList'
width: '20%',
itemTpl: [
'<div><b>{Color}<b></div>'
],
data: [
{Color: 'Red' },
{Color: 'Blue'},
{Color: 'Yellow},
{Color: 'Green}
]
},
Container:
ColorsList: '#ColorsList',
init function(){
..
..
..
..
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
...
...
...
},
ColorsPagesSelected Method:
ColorsPagesSelected: function() {
alert('Color page pushed');
this.getColorrightnavigation().push(Ext.create('ArtGalleryApp.view.RedPage'));
},
Since i used Colorslist id and used to push RedPage for list, it displays RedPage for each item in the list.
I dont know how to get different pages for differnt rows
Can any one help me pls thanks in advance
assuming you defined your colored pages like this:
Ext.define('App.view.RedPage', {
extend: 'Ext.Panel',
xtype: 'RedPage',
...
});
use helpful Ext.widget function
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
var color = record.get('Color'),
pageName = color + 'Page',
page = Ext.widget(pageName);
this.getColorrightnavigation().push(page);
}
My favorite hack for this is to assign functions to records
{
xtype: 'list',
id: 'ColorsList'
width: '20%',
itemTpl: ['<div><b>{Color}<b></div>'],
data: [{
Color: 'Red',
getPage: function() {
return Ext.create('ArtGalleryApp.view.RedPage');
}
}, {
Color: 'Blue'
}, {
Color: 'Yellow},
{Color: '
Green
}]
},
init function(){
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
this.getColorrightnavigation().push(record.getPage());
}
I need a list of names to display within a sheet in sencha touch. The sheet will display all other child items, but not the list. Am I doing something wrong, or does this simply not work? Here is the code:
myList = Ext.create('Ext.dataview.List', {
store: myStore,
itemTpl: '{firstName}, {lastName}'
});
mySheet = Ext.create('Ext.Sheet', {
items: myList
});
Ext.create('Ext.Panel', {
fullscreen: true,
items: [
mySheet,
{
xtype: 'button',
text: 'Click Me',
handler: function() {
mySheet.show();
}
}
]
});
Thanks in advance!
give it height=300. as per your requriment.
#jeremygerrits is almost correct.
IMO fit won't work as it will fit all the components.
My solution is to use vbox/hbox on the view container. Then on the components that get added, just add flex: 1.
e.g. container:
Ext.define('Tm.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'holder',
config: {
fullscreen: true,
layout: 'vbox'
}
});
and component:
Ext.define('Tm.view.MyComponent', {
extend: 'Ext.dataview.List',
xtype: 'newc',
config: {
flex: 1,
itemTpl: '{option_text}'
}
});
and in controller (assuming container ref been set):
tpl = Ext.create('Tm.view.MyComponent');
tpl.setData(data);
this.getMyContainer().add(tpl);
Then any component added displays correctly.
Try adding a layout to your panel config:
layout: 'fit'
This should make the list fill the rest of the space.
i have a carousel with 3 items and i have 1 toolbar. But how can i change the title of the toolbar depending on which item the carousel is showing? for example:
var theCarousel = new Ext.Carousel({
ui: 'dark',
direction: 'horizontal',
defaults: { cls: 'card', layout:'fit' },
items: [
{
html:'<b>I'm big</b>'
},
{
html:'<i>I'm oblique</i>'
},
{
html:'<u>I'm underlined</u>'
}
});
var toolbar = new Ext.Toolbar({
title: 'iToolbar' ,
dock: 'top',
items:[
{
text:'back',
ui:'back'
},{xtype: 'spacer'},
{
text:'Help',
ui:'help'
}
]
});
var panel = new Ext.Panel({
fullscreen: true,
layout: {
type : 'fit',
align: 'top'
},
defaults: {
flex: 1
},
items: [ theCarousel ],
dockedItems: [ toolbar ]
});
panel.show();
so when i am at the item 'I'm oblique' i want the title of the toolbar to show 'I'm oblique'
Anny ideas on how to do this? Ty, Already!
When each new card is revealed, Ext.Carousel fires an cardSwitch event. The handler of this event will receive the new card component as the second parameter. You can do
panel.setTitle(newCard.getYourTitle());
in the handler.