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.
Related
I want a carousel panel in the detailview of a list. I put the carousel with a flex 3 inside a panel. With this code I make sure the tpl inside the panel items will work. But I don't know how to fix the problem with the carousel.
Code for tpl inside panel items:
updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData); this.getAt(1).setData(newData);
}
complete code of my WorkDetail.js
Ext.define('Portfolio.view.WorkDetail', {
extend: 'Ext.Panel',
xtype: 'workdetail',
requires: [
'Ext.carousel.Carousel'
],
config: {
xtype: 'panel',
layout: 'hbox',
align: 'stretch',
styleHtmlContent: true,
scrollable: null,
items: [
{
flex:3,
xtype: 'carousel',
// HERE THE TLP WORKS
// tpl: '<img src="{bigImage1}"></img>',
// style: 'background-color: #456370;',
items: [
{
// TPL DON'T WORK
tpl: '<img src="{bigImage1}"></img>',
style: 'background-color: #E84F17;'
},
{
// TPL DON'T WORK
tpl: '<img src="{bigImage2}"></img>',
style: 'background-color: #4DBAB6;'
},
{
// TPL DON'T WORK
tpl: '<img src="{bigImage3}"></img>',
style: 'background-color: #BBB399;',
}
]
},
{
// HERE THE TLP WORKS
flex:1,
tpl: '<p>{workDiscriptionLarge}</p> <p>{workDate}</P> Bekijk de website'
}
]
},
updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData);
this.getAt(1).setData(newData);
}
});
this.down('component').setData(newData);
this.getAt(0).setData(newData);
These two lines will target your Carousel item and so won't populate the templates of the sub-items.
this.getAt(1).setData(newData);
This line will target the second item where you see the template working.
You will need to target each of the Carousel items individually and call the setData method of each for the templates to be populated.
// untested :)
var components = this.getAt(0).query('component');
for(var i = 0; i < components.length; i++){
components[i].setData(newData);
}
I have a Panel where I render a search-form. This works.
My problem is rendering a List under that search-form (so in the same Panel).
This is what I've done so far:
Ext.define("TCM.view.UserSearch",
{
extend: "Ext.form.Panel",
requires:
[
"Ext.form.FieldSet",
"Ext.List"
],
xtype: "usersearch",
config:
{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var clubsStore = Ext.create('TCM.store.Clubs');
clubsStore.load();
var usersStore = Ext.create('TCM.store.Users');
var searchButton =
{
xtype: 'button',
ui: 'action',
text: 'Search',
handler: this.onSearchButtonTap,
scope: this
};
var topToolbar =
{
xtype: 'toolbar',
docked: 'top',
title: 'Search',
items: [
{ xtype: 'spacer' },
searchButton
]
};
var userClub =
{
xtype: 'selectfield',
store: clubsStore,
name: 'clubId',
label: 'Club',
displayField : 'name',
valueField : 'id',
required: true
};
var userList =
{
xtype: 'list',
store: usersStore,
itemTpl: '{name}',
title: 'Search results'
};
this.add([
topToolbar,
{
xtype: "fieldset",
items: [userClub]
},
userList
]);
},
onSearchButtonTap: function ()
{
console.log("searchUserCommand");
this.fireEvent("searchUserCommand", this);
}
});
I can't see anything being rendered under the fieldset (the searchform). What could be wrong?
Most of time, when you don't see a component it's because you did not set a layout to your container or a height.
You can find more about layout here.
In your case, you want to have two components in your container. Therefore, I suggest a Vbox layout.
Here's an example
Hope this helps.
I actually used something like this in a project try this...Put this in the items property of your fieldset...
{
xtype: 'searchfield',
clearIcon: true,
placeHolder: 'Type Some text'
},
{
xtype: 'list',
hidden:true, //Initially hidden populate as user types something
height: '150px',
pressedDelay: 1,
loadingText: '',
store: 'listStore',
itemTpl: '{\'What you want to be displayed as per your model field\'}'
}
In your controller write a handler for the keyup event of the searchfield to load the store with relevant data and toggle the hidden property of the list. Hopefully list should appear with the search results(Worked for me and looked quite good). Hope this helps...
I have a navigation view with list(A) as its item.
On clicking the list(A) item, showing new view(B).
Now the new view(B) is having one button on clicking again change to view(C).
Problem is
view(C) is same as view(B).
I am able to create the new view and push it, but not able to populate with new data.
and on coming back to view(B), I am getting the data of view(C).
How to solve this scenario.
Code:
/**
* navigationview with list(A)
*/
Ext.define('activity', {
extend: 'Ext.navigation.View',
config: {
items:[
{
grouped:true,
pinHeaders: true,
xtype:'list',
store:{
xclass:'ActivityList'
},
itemTpl:'{title}',
emptyText: 'nothing found'
}
]
}
});
/**
* child view(B) to be appeared on clicking any item in list(A).
*/
Ext.define('TaskDetails', {
extend: 'Ext.Panel',
config: {
title: 'Task',
layout: {
type: 'fit'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: '40px',
items: [
{ xtype: 'spacer'},
{
xtype: 'segmentedbutton',
height: '30px',
items: [
{
text: 'Task Details',
pressed: true
},
{
text: 'Child Tasks',
badgeText: '0'
}
]
},
{ xtype: 'spacer'}
]
},
{
xtype: 'container',
items: [
{
xtype:'dataview',
store: {
xclass: 'TaskDetails'
},
itemTpl: 'some thing....'
},
{
xtype:'list',
store:{
xclass:'ChildTask'
},
itemTpl: 'some template...'
}
]
}
]
}
});
I am changing view in controller and want to show the same view(B)again with new data on clicking the list in view(B).
This is a feature of navigation view which you cannot circumvent. Use setActiveItem instead to push views... I had the same issue and changed to setActiveItem it gives you more control of your views than navigation view so
After you first load the view(2), the ref returns an array of 1, as it should. Refs only work if 1 component is returned.
After you load the view(2) again the ref returns an array of 2.
This means none of the listeners fire and the data doesn't load on new instances.
Refs bind to dom elements when controllers first see a view. We can't change that. This means we can't use a ref directly. We know the Ext.ComponentQuery.query is what refs rely on. Using that, we can simulate refs at runtime. I put a runtime dataview ref in the initialize() function of the controller to load the data for a new view. This seems to run every time a view is created, so it works.
I'm having trouble with the layout of a FormPanel in Sencha Touch 2. See example app below.
There should be a panel with 'vbox' layout containing 3 items: a piece of text, a FormPanel, and another piece of text. However the FormPanel seems to get size 0x0 and not show up at all, so I only see the two texts.
I found 2 things that get the form panel to show up:
Setting layout: 'fit' on the outer panel. But then everything overlaps. fit isn't really designed for more than one item, so this isn't a solution.
Settings explicit width and height config on the FormPanel. But I want it to layout itself and not have to specify this in pixels. Why would I need to do this?
I've tried a bunch of other random params, but I'm just shooting in the dark. So what am I missing?
Ext.application({
name: 'TestApp',
launch: function() {
return Ext.Viewport.add({
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center'
},
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items: [
{ html: 'Fill in the form below' },
{
xtype: 'formpanel',
// width: 300, // These fixed sizes reveal the form, but why?
// height: 300, // These fixed sizes reveal the form, but why?
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
{ html: 'Fill in the form above' }
]
});
}
});
Set scrollable property of your formpanel object to false, that will solve the problem.
{
xtype: 'formpanel',
scrollable: false,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
Update. Please note, that in newer releases of Sencha (2.3) you will have to use scrollable: null, as noticed by Nathan Do in his comment to this answer. But since it's not documented feature in can be changed in the future.
TracKer's answer is correct, but he doesn't provide an explanation for why.
Here's my take at why you need scrollable:false.. If the formpanel IS scrollable, then you need to tell Sencha how big to make it (and within that size the user can scroll around it). However, if it's NOT scrollable, it will take up the entire space it's allowed, and to get to be bigger the user can scroll around to access it.
A bit confusing =\
I kind of switched around your code a little but here's what I came up with:
Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
var paneltest = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'vbox',
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items : [
{
html : 'Fill in the form below',
flex: 1
},
{
xtype: 'formpanel',
flex: 1,
items : [
{
xtype : 'fieldset',
items : [{
xtype : 'textfield',
name : 'username',
label : 'Username'
}]
}
]
},
{
html : 'Fill in the form above',
flex: 1
}
]
});
Ext.Viewport.add(paneltest);
}
});
My main change to your code was that I removed the
layout: {
type: 'vbox',
align: 'center'
}
and I changed it to
layout: 'vbox'
I also added a flex to your elements. This is the proper way to use the vbox and hbox layouts. I'm not totally sure why this works, however it does look like 'center' is not a valid value you can give the align attribute. I think you are looking for 'middle'. And if that doesn't give you what you are wanting maybe try to add a class or id to your panel and control the alignment with css. Hope this helps.
I'm a newbie to SenchaTouch. I have started working on an App and the results are this until now: http://mobz.com.br:86. (based on the Sencha-Touch-tabs-and-toolbars-demo)
Now I started playing with it and I have difficulties to set things strait in my head.
I have lot of JQuery experience, but regarding the design of this library, the coin haven't dropped yet.
I got a TabPanel with 5 sections. I will focus only in one section cause there where my problem is.
The Problem
As you can see in my app, when one clicks an item of ingressos (tickets in English), the app loads the second panel, but load it with bugs.
It loads it without the title bar, without the Back button, and also add an empty sixth button on the right.
But if I load the second panel first, when the page loads, it loads without any UI issues.
My Code
First I declare my ViewPort
Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'destaques', id: 'home' },
{ xtype: 'ingressos' },
{ xtype: 'mobilizacoes' },
{ xtype: 'locais' },
{ xtype: 'minhaconta' }
]
});
Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Than after, at the ingressos.js file, I define the tab.
First I got the panel that will load the items into it.
Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
id: "ingressos",
title: "Ingressos", //title of the page
iconCls: "arrow_right", // icon of the tab at the bottom
styleHtmlContent: true,
fullscreen: true,
layout: 'card',
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos"
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('ingressos', Mobz.views.Ingressos);
This is the initial item that load into the panel.
Mobz.views.IngressosList = new Ext.List({
id: 'ingressoslist',
itemTpl: IngressosList_Template,
store: Mobz.stores.IngressosStore,
onItemTap: function (subIdx) {
//Mobz.views.IngressoCinemaList.update(subIdx);
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
}
});
And that's the second panel.
The panel where the first panel goes to.
Mobz.views.IngressoTitle = new Ext.Panel({
id: 'ingressotitle',
tpl: IngressoTitle_Template,
data: Mobz.stores.IngressoTitle_Store
});
Mobz.views.IngressoCinemaList = new Ext.List({
id: 'ingressocinemalist',
itemTpl: IngressoCinemaList_Template,
store: Mobz.stores.IngressoCinemaListStore,
flex: 1, grouped: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
}
}]
}
],
onItemDisclosure: function () {
app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
}
});
Mobz.views.Ingresso = new Ext.Panel({
id: 'ingresso',
layout: {
type: 'vbox',
align: 'fit'
},
items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
});
That's it.
I hope some of you guys will have the patient to read all my code examples. I'll appreciate any help.
Shlomi.
First, you must understand the logic about the panels.
You have an TabPanel and you have 5 panel in it. If you run your code when you click a ticket as you described in problem, your code added a new pane to TabPanel. But you need to set active item of Ingression panel(second panel which is in tabPanel).
Now start the solution;
The second tab has a panel(I will say senchaTabItem) whose layout is card layout. And this panel has a panel in it with list of Ingressos. We want to remove this panel and replace the new panel so we should not call the tabPanel's method, we must call to senchaTabItem's method.
So if you replace below code
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
with working code(below code).
Mobz.views.viewport.getActiveItem().setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
In your site; it is at line 170 in ingressos.js
I tried and it works, I hope it helps