1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    62
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default Passing params to Store in a View

    Passing params to Store in a View


    I have a view that contains a list of orders, in my controller i have a reference to this view and an listener on the 'itemtap' event. When you tap a order a different view needs to be shown which should call upon a different store that will load all the information of that order by passing an orderid as a parameter to that store.

    As of now i was unable to find a clear example to use the params config for a store when this store is set in a View. I found a workaround for this but i'm not too happy with it. There has to be a easier way to do this;

    Within the itemtap listener:
    Code:
    var OrderStore = Ext.getStore('OrderStore');        OrderStore.load({
                params: {
                    id: record.get('orderid')
                },
                callback: function(records, operation, success) {                
                    var OrderContainer = Ext.create('wp-touch.view.OrderView');
    
                    OrderContainer.add({
                        xtype: 'panel',
                        id: records[0].get('id'),
                        html: '<p>Order informatie: ' + records[0].get('orderid')
                    });
                    
                    OrderContainer.add({
                        xtype: 'segmentedbutton',
                        items: [
                                {
                                    text: 'Operations',
                                    pressed: true
                                },
                                {
                                    text: 'Materials'
                                }
                        ],
                        listeners: {
                            toggle: function(container, button, pressed){
                                console.log("User toggled the '" + button.getText() + "' button: " + (pressed ? 'on' : 'off'));
                            }
                        }
                    });
    
    
                    OrderContainer.add({
                        xtype:'list',
                        flex: 1,
                        id: record.get('id'),
                        itemTpl: '{title}',
                        data: [{ title: 'item 1' },
                               { title: 'item 2' },
                               { title: 'item 3' }]
                    });
                    
                    Ext.Viewport.setActiveItem(OrderContainer, { type: 'slide' });
                },
                scope: this
            });
    As you can see I'm manually adding all the components i want in the view so i can set the data that is loaded from the OrderStore into this view. A order contains a array of operations and materials and by pressing the segmented buttons you should be able to view these by the list. I'm not sure yet how i'm going to get those arrays into that list but for now i would like to first clean this up.

    Is it possible to just enable the OrderView on itemtap and pass the orderid as a parameter to the store that is in the config of this view?

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    62
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default


    Ok i've managed to create the view including the components but for now i haven't found a way to make sure the loaded data in the store is set into the view. When i set the config in the view; store: OrderStore and have autoLoad enabled in OrderStore i can't seem to get the listener beforeload to work so i can set the extraParams in the proxy.What i have now; OrderView.js
    Code:
    Ext.define('wp-touch.view.OrderView', {    extend: 'Ext.Container',
        xtype:    'orderview',
        requires: [
                   'Ext.form.FieldSet',
                   'Ext.List',
                   'Ext.SegmentedButton'
               ],
               
        config: {
           
            defaults: {
                styleHtmlContent: true
            },
            store: 'OrderStore',
            fullscreen: true,
            layout: 'vbox',
            
            items: [
                    {
                        xtype: 'panel',
                        itemTpl: Ext.create( 
                                'Ext.XTemplate',
                                    '<p>Order informatie: {name}, {orderid}'
                                )
                    },
                    {
                        xtype: 'segmentedbutton',
                        centered: true,
                        items: [
                                {
                                    text: 'Operations',
                                    pressed: true
                                },
                                {
                                    text: 'Materials'
                                }
                        ],
                        listeners: {
                            toggle: function(container, button, pressed){
                                console.log("User toggled the '" + button.getText() + "' button: " + (pressed ? 'on' : 'off'));
                            }
                        }
                    },
                    {
                        xtype: 'list',
                        flex: 1,
                        itemTpl: '{title}',
                        data: [
                            { title: 'Item 1' },
                            { title: 'Item 2' },
                            { title: 'Item 3' },
                            { title: 'Item 4' }
                        ]
                    }
            ]
        }
    });
    Within the itemtap event:
    Code:
    var OrderStore = Ext.getStore('OrderStore');        
    OrderStore.getProxy().setExtraParams({id: record.get('orderid')});
    
    OrderStore.load();
            
    OrderStore.addListener({
                beforeload:  function(store, records, options) { //This doesn't seem to work, the console.log output is not showing up.
                    console.log('before');
                }
                load:  function(store, records, options) {
                    console.log(store);
                }
            });
            Ext.Viewport.setActiveItem('orderview');

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Posts
    62
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default


    Another update: i still haven't found a way around setting the whole params thing. I guess this is the only way to do it and then within the callback method you have to add all the information to the view.Within the itemtap event:

    Code:
    var OrderStore = Ext.getStore('OrderStore');		
    		OrderStore.load({
    			
    			params:	{ id: record.get('orderid')},
    			
    			callback: function(records, operations, success){				
    				Ext.Viewport.setActiveItem('orderview');
    				var orderView = Ext.Viewport.getActiveItem();
    				
    				var informationPanel = orderView.query('panel')[0];
    				informationPanel.setHtml('<p>Order informatie: '+records[0].get('name')+', '+records[0].get('orderid')+'</p>');
    				
    				var list = orderView.query('list')[0];
    				
    				list.setData(records[0].operationStore.data.all);
    			}
    		});
    I use the queries to get the instance of the components within the OrderView. This way i can set the data for the list and put information in the panel component. records[0].operationStore.data.all is the array of all the operations of an Order.

    This is now how the List component looks within OrderView.js:
    Code:
    {                	xtype: 'list',
                    	flex: 3,
                    	store: 'OrderStore',
                    	id: 'listItemsOrder',
                        itemTpl: Ext.create( 
                    			'Ext.XTemplate',
                    			'{name}',
                    			'{[console.log([values])]}',
                    			'{operationid} <span style="font-size: 0.7em">Regel: {linenr}</span>',
                    			'<p style="font-size: 0.7em">{description}</p>'
                	    ),
                	    listeners:{
                	    	updatedata: function( newData, eOpts ){
                	    		console.log(newData);
                	    	},
                            itemtap: function (index, target, record) {
                                 console.log(record);
                            }
                        },
                    }
    I'm using the listeners to debug a weird problem i encounter; When i view the data after it is set in the list, it is just a list of operations(24 of them) but when i go the to list i see that at the top there is a extra item, but it's empty due to it doesn't have the values set within the itemTpl. When i used the {name} tag it showed me that it actually was the Order itself instead of an operation. So for some reason the data in the list is correct(24 operations) but in the list itself is still a extra item and i can't figure out where it is coming from.

  4. #4
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    319
    Vote Rating
    10
    keckeroo will become famous soon enough

      0  

    Default


    I've created a fiddle for you to show you a proper implementation of dataviews/lists and how they interact with a store automatically. In the example I use the data/setData methods to provide data, but the store load method will work the same way (as you have in your example). You should not need to use listeners unless you need to do something specific outside the ordinary interaction of the list and the store.

    You may examine the example by visiting https://fiddle.sencha.com/#fiddle/2kr

    Kevin

  5. #5
    Sencha User
    Join Date
    Nov 2013
    Posts
    62
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default


    Quote Originally Posted by keckeroo View Post
    I've created a fiddle for you to show you a proper implementation of dataviews/lists and how they interact with a store automatically. In the example I use the data/setData methods to provide data, but the store load method will work the same way (as you have in your example). You should not need to use listeners unless you need to do something specific outside the ordinary interaction of the list and the store.

    You may examine the example by visiting https://fiddle.sencha.com/#fiddle/2kr

    Kevin
    Thank you very much! The .getStore().setData() part did the trick, the data is now being updated when i click the button

    I have another question, little unrelated to this topic but it's still about the Store component and more specifically; about the Grouper config.

    It seems that the groupFn method within the Grouper config of my Store is being called more times that it should. It should group my order if one of the operations within the order has started and then group the orders by 'In progress' and 'To do'. This works and it groups the orders accordingly but when i put a console.log within the groupFn method it seems it fires more times then it should and even when i drag the list it always seems to execute the groupFn method. The code:

    Code:
    config: {		model:	'wp-touch.model.Order',
    		storeId: 'OrderListStore',
    		autoLoad: true,
    		sortProperty: 'name',
    		grouper: {
    			groupFn: function(record) {	
    				console.log(record);
    				var boolHasStarted = false;
    				var operationList = record.operationStore;
    				operationList.each(function(operation){
    					if(operation.get('started')){
    						boolHasStarted = true;
    						
    					}
    				});
    				
    				if(boolHasStarted){
    					return 'Orders in progress';
    				}else{
    					return 'Orders to do';
    				}
    			}
    		}
           }
    	}
    The console.log returns the following and the last part(InternalId: 0001) is shown when i drag the list.
    orderliststore.png
    There wasn't really a problem at first but for some reason when i click on one of the orders it should load in the view OrderView which contains all the information about the order. But when it got there, the groupFn method was still firing but fired a error because .operationStore was undefined. It turns out that the current record was a operation from that order. It don't understand how it got there or why it would try and group that since it wasn't in the same view. I haven't encountered this problem again but i fear it may come back and then i would like to understand why it came back.

Thread Participants: 1