Results 1 to 4 of 4

Thread: Scrollable Actionsheet -> terribly slow

  1. #1
    Sencha User
    Join Date
    Oct 2014
    Posts
    51
    Answers
    1

    Default Scrollable Actionsheet -> terribly slow

    Hello,

    I wanted to create a filter in an action sheet. Unfortunately this is unusably slow. Even, if I remove *all* fields from the sheet, scrolling inside it is slow

    Do you have any idea why this is the case?

    Bye The_Unknown

  2. #2
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default

    Quote Originally Posted by The_Unknown View Post
    Hello,

    I wanted to create a filter in an action sheet. Unfortunately this is unusably slow. Even, if I remove *all* fields from the sheet, scrolling inside it is slow

    Do you have any idea why this is the case?

    Bye The_Unknown

    Code please? I've done the same a couple of times and have never had problems so far...
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  3. #3
    Sencha User
    Join Date
    Oct 2014
    Posts
    51
    Answers
    1

    Default

    Sheet-View:

    Code:
    Ext.define('Project.view.phone.EventsLimiter', {
    	extend: 'Ext.ActionSheet',
    	xtype: 'events-limiter',
    	requires: [
    		'Ext.Label',
    		'Ext.form.Panel',
    		'Ext.field.Slider',
    		'Ext.Toolbar',
    		'Ext.field.Text',
    		'Ext.field.Toggle'
    	],
    	config: {
    		enter: 'right',
    		exit: 'right',
    		layout: 'fit',
    		width: '75%',
    		height: '100%',
    		right: 0,
    		left: 'auto',
    		fullscreen: true,
    		cls: 'events-limiter',
    		items: [
    			{
    				xtype : 'toolbar',
    				title: 'Limit',
    				docked: 'top',
    				items: [
    					{
    						xtype: 'button-limit-back'
    					}
    				]
    			},
    			{
    				xtype: 'formpanel',
    				scrollable : {
    					direction     : 'vertical',
    					directionLock : true
    				},
    				items: [
    					{ xtype: 'label', tpl: '<h2>Filter</h2>', data: {} },
    					{
    						xtype: 'sliderfield',
    						name: 'duration',
    						label: 'Duration',
    						labelAlign: 'top',
    						value: 1,
    						minValue: 0,
    						maxValue: 5
    					},
    					{
    						xtype: 'fieldset-location'
    					},
    					{
    						xtype: 'sliderfield',
    						name: 'distance',
    						label: 'distance',
    						labelAlign: 'top',
    						value: 1,
    						minValue: 0,
    						maxValue: 5
    					},
    					{ xtype: 'label', text: 'Type', data: {} },
    					{
    						xtype: 'togglefield',
    						cls: 'x-toggle-field excursion',
    						value: 1,
    						label: 'excursion',
    						labelWidth: '60%',
    						padding: 0
    					},
    					{
    						xtype: 'togglefield',
    						cls: 'x-toggle-field join-in-campaign',
    						value: 1,
    						label: 'join-in-campaign',
    						labelWidth: '60%',
    						padding: 0
    					},
    					{
    						xtype: 'togglefield',
    						cls: 'x-toggle-field meeting',
    						value: 1,
    						label: 'meeting',
    						labelWidth: '60%',
    						padding: 0
    					},
    					{
    						xtype: 'togglefield',
    						cls: 'x-toggle-field talk',
    						value: 1,
    						label: 'talk',
    						labelWidth: '60%',
    						padding: 0
    					},
    					{
    						xtype: 'togglefield',
    						cls: 'x-toggle-field other',
    						value: 1,
    						label: 'other',
    						labelWidth: '60%',
    						padding: 0
    					},
    					{ xtype: 'label', tpl: '<h2>Sort</h2>', data: {} },
    					{
    						xtype: 'fieldset',
    						layout: 'hbox',
    						items: [
    							{ xtype: 'label', html: 'Distance', width: '50%', cls: 'bold' },
    							{ xtype: 'toggle-distance-time', value: 0, width: '25%' },
    							{ xtype: 'label', html: 'Time', width: '25%', style: 'text-align: right;' }
    						]
    					},
    					{ xtype: 'button-limit-apply' },
    					{ xtype: 'label', tpl: '<small>A hint</small>', data: {} }
    				]
    			}
    		]
    	},
    	initialize: function() {
    		// manually add a swipe listener - sencha issue
    		var view = this;
    
    
    		Project.util.Common.addSwipeListener(view);
    		view.callParent();
    	}
    });
    If more code is needed, tell me, please

    What might also be interesting: Even, when I remove everything but the first label from the formpanel, it is slow.

  4. #4
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default

    I don't have any problems with speed at all I build your code in a fiddle... I think the problem is not the ActionSheet itself. Maybe some problem with the environment?

    https://fiddle.sencha.com/#fiddle/h9t
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •