I have a panel (layout:'vbox') with two items; a panel and a list.
Code
this.currentFolderPnl = new Ext.Panel({
cls:'document-current-folder-panel',
html:'/'
});
this.list = new Ext.List({
scroll: 'vertical',
cls:'document-list',
id: 'document-list',
store: app.stores.Document,
itemTpl: app.templates.document
});
app.views.DocumentList.superclass.constructor.call(this, {
selectedCls : "x-item-selected",
dockedItems: [{
xtype: 'toolbar',
ui:'dark',
title: 'Documents',
items:[this.backBtn,{xtype:'spacer'},this.newBtn]
}],
layout: {type:'vbox',align:'stretch'},
items: [
this.currentFolderPnl,
this.list
]
});
I have tried many things but nothing worked. Could somebody tell me what to do.
Thanks
A scroll can only appear while the child element is larger in size (either height or width or both) than the parent element. Because you are using a vbox layout, it expects height for each component. So, a list scroll will come while it fits inside a panel.
Now for your case, two options can be there:
Option 1:
You can provide a height to the first panel (which still you didn't provide) and add another panel after that with following details:
{
flex : 1,
layout : 'fit',
items : [this.list]
}
This will fit the list within second panel and the scroll will come automatically.
Option 2:
Here you use a default layout (AutoContainerLayout) i.e. not providing any layout. And your above combination will work (better give a height to the first panel). Remove scrolling from list and add scroll vertical to main panel. This way:
this.currentFolderPnl = new Ext.Panel({
...
height : 50
});
this.list = new Ext.List({
scroll: FALSE,
....
});
app.views.DocumentList.superclass.constructor.call(this, {
scroll : 'vertical',
...
});
I didn't test the above option but this should work fine.
Related
Looking in the Docs for Sencha Touch there seems to be an option on the List widget that allows for setting "infinite" which enables infinite scroll.
Docs: https://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List-cfg-infinite
I am hoping this will resolve some issues that I have with performance with very large lists on portable devices.
Important Note: This is for an offline mobile app. As in the fiddle. The store already contains all of the data.
I tried enabling it on a large list but all it does is hide the data.
{
xtype: 'list',
store: 'contactStore',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
infinite: true /* Setting this to true hides the list */
}
What am I missing? I have included a jsFiddle.
http://jsfiddle.net/AnthonyV/bba58zfr/
The issue here isn't anything about the data being loaded like the other answers. You have said the data is being loaded into the store just fine as when you don't have infinite set to true you can see the data.
First, let's discuss what the infinite config does. As Anand Gupta explained, the infinite config will only render the number of list items that can fit on the screen (plus some as a buffer for scrolling). If you don't have it set to true then the list will render all items and not manage a visible range. With all items rendered, the list can support auto sizing. However, when infinite is set to true, the list needs to know what size it has in order to calculate the number of visible rows it can render.
This is where the issue happens, the list doesn't have a full size set to it. You have the list nested in a container and that container uses vbox layout:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'container',
layout: 'vbox',
title: 'Big List',
items: [{
xtype: 'list',
store: 'contactStore',
id: 'simpleList',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: false
}]
}]
}
This is technically overnesting. Overnesting is when you have nested a component within a container that doesn't need to be nested within the container. This is an unnested version of your code that should work as you want:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'list',
title: 'Big List',
store: 'contactStore',
id: 'simpleList',
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: true,
variableHeights: true
}]
}
What I did here is remove the container and had the list as a direct child of your MyApp.view.MyIssue navigation view. The navigation view uses card layout which will give each direct child 100% height and width and therefore allowing the list to calculate the number of rows it can render with infinite set to true. Here is a Sencha Fiddle to show this unnested list in action: https://fiddle.sencha.com/#fiddle/11v1
The other way, if you REALLY wanted the list to be nested in that container (the more you nest, the bigger the DOM since you have more components created and the bigger the DOM, the slower your app may respond) then you can give the container's vbox layout the align config:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
title: 'Big List',
items: [{
xtype: 'list',
store: 'contactStore',
id: 'simpleList',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: true
}]
}]
}
In the unnested list example, I also use the variableHeights config on the list. This allows the list items to be properly heighted. Run the fiddle with it commented out to see the difference it makes.
You can go with this. Add this plugin, It handles automatically infinite scrolling.
http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging
For offline
You can implement an idea. Create 2 store one is fully loaded and second will load only with some page size suppose 10. You will use second store in your grid and implement list paging plugin, also pass here second store.
You can take help with this fiddle example. (this example is in Ext jS 5 but logic will be same)
https://fiddle.sencha.com/#fiddle/pim
Please try this one and let us know.
First you need to understand that infinite: true helps in improving list performance. It helps rendering only that chunk of list data which is the current page, rest are not rendered. So,
For pagination, you backend should support that like it should have parameter like limit, start, pageSize etc.
For implementing pagination, your store should have these configs like pageSize, buffered etc.
Hence if your backend support and you have implemented pagination. Then you can enjoy the benefit of infinite: true and get extreme sencha touch list performance.
I am using a tab panel (Ext.tab.Panel) that has 4 tabs and on one of the child screens when the user make a selection from a radio button group, I would like the tab panel to refresh itself (i.e. load new text, new icons). How can I force the tab Panel (which is the core navigational element of the app) to refresh?
I have tried setting the show: function() { } method on the view as follows:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
...
show: function() {
this.callParent();
... reload stuff
}
});
The tabs/icons in a Ext.tab.Panel make up the items property of the component. To change these tabs/icons you must change the items.
Use setItems(items) to effectively change the tabs/icons of the Ext.tab.Panel inside your listener.
var tabpanel = Ext.getCmp('tabpanelid'); // Get appropriate panel using its id
// Removes the current tabs, and inserts the following 2 tabs
tabpanel.setItems([
{
title: 'Tab1',
iconCls: 'info',
html: 'Foo'
},
{
title: 'Tab2',
iconCls: 'reply',
html: 'Bar'
}
);
Check out a working example here.
UPDATE: To modify one of the current items, use getItems(), modify the appropriate items, and call setItems(items).
Updated Example
I am new to sencha , and I am using sencha 2 mvc.I am having a Tabpanel and the first tab contains a list.When clicking on the button in the list i want to load/switch view of its details with a form..I am unable to find the answer.Please help me asap..
{
xtype: 'tabpanel',
baseCls:'tabheader',
cls:'tab_container',
scrollable:true,
tabBarPosition: 'top',
flex:1,
items: [
{
xtype:'container',
title:'Sample',
id:'Sample',
layout:'card',
cardSwitchAnimation: 'slide',
tabBarPosition: 'top',
items:[
{
title: 'Sample',
xtype: 'list',
flex:1,
store: 'SampleWithoutAgentOffers',
itemTpl: '{name}' ,
onItemDisclosure: function(record, btn, index) {
Ext.Viewport.setActiveItem(1);
}
}
]
},
{
xtype:'panel',
html:'hiiii'
}
]
}
On itemdisclosure i want to load view..Please help me..
Please see my edits to your original question, I'm not sure if that configuration you posted would even run in JavaScript.
I fixed your configuration object so it should technically work. However, I don't have visibility into your Viewport object. If what you are trying to do onItemDisclosure is show the panel with html of 'hiii', then you should be doing:
onItemDisclosure: function(record, btn, index) {
this.parent.setActiveItem(1);
}
I'm new to Sencha Touch and the Ext JS logic. Actually, I'm displaying a list of items containing two fields (title, type) grouped by default alphabetically by first character of the title and I added a button to a toolbar that I want it to switch the grouping to be by type. I tried to programmatically set the getGroupString function in the buton handler in this way :
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [{
text: 'By type',
handler: function() {
MyApp.MyStore.getGroupString = function(record) {
return record.get('type');
};
MyApp.itemsList.update();
}
}]
});
But that seems just to not work. Any help ?
Thanks
Just wanted to close the question as I have already answered it
MyApp.itemsList.refresh();
How can I set the row height in a Sencha Touch List object?
I'm using HTML to format the row, rows get taller with multiple lines, but how do I set the row height?
Thanks,
Gerry
To edit the List elements default height, you have two ways to do it:
Create your own Sencha Theme with SASS (The official Sencha way to do it).
Override the Sencha Touch Theme CSS.
In the first case you only need to edit the $global-row-height variable value like, for example.
$global-row-height: 100px;
If you want to override the CSS class directly with an additional CSS file, you can do it adding a new rule just like this:
.x-list .x-list-item {
min-height: 100px;
}
If you want to set the list Height of a single list you have to set your css class in this way:
.myList .x-list-item {
min-height: 100px;
}
and add the cls config param to your list definition like this
var list = new Ext.List({
cls: 'myList',
...
...
});
You can also use the list config property itemHeight,like this:
var list = new Ext.List({
itemHeight: 25, //to set row height to 25 pixels
...
...
});
However, I always suggest to learn SASS. It's really easy and it really worth learning.
Hope this helps.
Since Sencha Touch 2.1 you can use list config property itemHeight (more info here). Just for information, it's also possible in NestedList object by using listConfig property.
Use the below code to change the height of list item in Sencha Touch.
{
xtype: 'list',
id: 'myList',
//Below two properties to change the default height
//default = 47 chaged to 30 below
variableHeights: true,
itemHeight: 30 ,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
Incase somebody is still looking for the answer in Sencha Touch 2.4.1, here it comes:
listeners: [
{
event: 'painted',
order: 'before',
fn : function() {
// Set the height based on the number of items in the list!
var itemCount = this.itemsCount,
itemHeight = this.getViewItems()[0].element.getHeight(), // Works!
heightOfList = itemCount * itemHeight;
this.setHeight(heightOfList);
}
}
]
I am adding a listener for the painted method inside of my listView. I'm not sure if it matters, if you add the listener at the position of before, or after, but before made more sense to me.
I am simply taking the count of items in the list and multiplying it with the actual height of a list item element. I assume that all list items have the same height in the final list (this will always be the case for my list).
I tried the same approach with
itemHeight = this.getInnerItems()[0].element.getHeight() // Does NOT work
but that wouldn't work, because the elements would have a height of 0px at this points.
The code above works!