Sencha folks -- can you give us some insight as to why this was closed? Is this not going to be fixed? Thanks.
Printable View
Sencha folks -- can you give us some insight as to why this was closed? Is this not going to be fixed? Thanks.
I'm also waiting for an official answer...
I believe this is the bug that is causing my problems too. I can no longer add a list to a container (vbox) and have the list sized automatically, with a form panel below my list. In the past I achieved this by setting scrollable: false on the list and on the form panel.
For now I did work around this problem by using a DataView with scrollable: false.
A fix would be appreciated.
The main thing here is that the List component can't be an inline object anymore. In order to build the list elements while scrolling it has to know its boundaries, and thus it needs a specific height/width.
I don't know you, but I would like a way for it to build the entire list (=disable the infinite scrolling functionality) as an option when instantiating the component.
I am seeing the same thing in 2.1 RC2.
There seems to be a side effect on the disclose button "sensitivity" on a list. It has become quite unresponsive. Needs several taps for the disclose events to fire.
Also, the disclose tap does not fire an onitemtap event any more like it did in 2.0
It has also become possible to a "double tap" on the disclose button and have 2 disclose events fire in a row.
All this stuff worked fine in 2.0
This other bug report has been closed and ignored by Sencha staff (at least, as far as we the users can see). I'm not sure what other way to get Sencha to pay attention to it so I'm opening a bug report about the bug report:
http://www.sencha.com/forum/showthre...ays-scrollable
With the new infinite list there is no direct relationship with a record and a list item element. The list needs to be scrollable in order to interject the other records into the list. Like if you have 100 records in the store, maybe only 10 will actually be rendered. If the list wasn't scrollable then you would not be able to render the other 90 records which is bad.
I'm assuming you are wanting to have the list not be scrollable, put it in a container that is scrollable and have a button at the end of the list so when you scroll to the bottom you will of course see the button. This worked before the infinite list but you are still rendering quite a lot of list items which will increase DOM size which will negatively affect performance. Instead you can still take advantage of the infinite list but still get a button at the "bottom" of the list. Here is the app.js from the list example I have modified to get a button at the bottom (crucial configs are in red):
Now when you scroll all the way to the bottom, you will see the My Button button at the end and you are still having the infinite list.Code://<debug>
Ext.Loader.setPath({
'Ext': '../../src'
});
//</debug>
/**
* This simple example shows the ability of the Ext.List component.
*
* In this example, it uses a grouped store to show group headers in the list. It also
* includes an indicator so you can quickly swipe through each of the groups. On top of that
* it has a disclosure button so you can disclose more information for a list item.
*/
//define the application
Ext.application({
//define the startupscreens for tablet and phone, as well as the icon
startupImage: {
'320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
'640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
'640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
'768x1004': 'resources/startup/768x1004.png', // Non-retina iPad (first and second generation) in portrait orientation
'748x1024': 'resources/startup/748x1024.png', // Non-retina iPad (first and second generation) in landscape orientation
'1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
'1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
},
isIconPrecomposed: false,
icon: {
57: 'resources/icons/icon.png',
72: 'resources/icons/icon@72.png',
114: 'resources/icons/icon@2x.png',
144: 'resources/icons/icon@144.png'
},
//require any components/classes what we will use in our example
requires: [
'Ext.MessageBox',
'Ext.data.Store',
'Ext.List',
'Ext.plugin.PullRefresh'
],
/**
* The launch method is called when the browser is ready, and the application can launch.
*
* Inside our launch method we create the list and show in in the viewport. We get the lists configuration
* using the getListConfiguration method which we defined below.
*
* If the user is not on a phone, we wrap the list inside a panel which is centered on the page.
*/
launch: function() {
//get the configuration for the list
var listConfiguration = this.getListConfiguration();
//if the device is not a phone, we want to create a centered panel and put the list
//into that
if (!Ext.os.is.Phone) {
//use Ext.Viewport.add to add a new component into the viewport
Ext.Viewport.add({
//give it an xtype of panel
xtype: 'panel',
//give it a fixed witdh and height
width: 350,
height: 370,
//make it centered
centered: true,
//make the component modal so there is a mask around the panel
modal: true,
//set hideOnMaskTap to false so the panel does not hide when you tap on the mask
hideOnMaskTap: false,
//give it a layout of fit so the list stretches to the size of this panel
layout: 'fit',
//insert the listConfiguration as an item into this panel
items:[listConfiguration]
});
} else {
//if we are a phone, simply add the list as an item to the viewport
Ext.Viewport.add(listConfiguration);
}
},
/**
* Returns a configuration object to be used when adding the list to the viewport.
*/
getListConfiguration: function() {
//create a store instance
var store = Ext.create('Ext.data.Store', {
//give the store some fields
fields: ['firstName', 'lastName'],
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
return {
//give it an xtype of list for the list component
xtype: 'list',
//set the itemtpl to show the fields for the store
itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
//enable disclosure icons
disclosure: true,
//group the list
grouped: true,
//enable the indexBar
indexBar: true,
//set the function when a user taps on a disclsoure icon
onItemDisclosure: function(record, item, index, e) {
//show a messagebox alert which shows the persons firstName
e.stopEvent();
Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
},
//bind the store to this list
store: store,
items : [
{
xtype : 'button',
text : 'My Button',
scrollDock : 'bottom',
docked : 'bottom'
}
]
};
}
});
If you don't want this still then you won't be able to use the List, it's pretty much impossible to do unless you want to set the item heights yourself. You can still use DataView and style it and turn off scrolling but you would loose the LIst features like grouping. Or of course you can use a Container and a tpl yourself.