1. #11
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    0
    terryfritsch is on a distinguished road

      0  

    Default Dataview example?

    Dataview example?


    Does anyone have an example of using this plugin with a dataview?

    I've set the dataview.tpl to be the new tpl, and I can confirm that the tpl is in fact set, but it doesn't seem to be handling the component rendering.

    A straight tpl.overwrite works just fine, so it has to have something to do with passing this through a store/dataview.

    Any ideas?

    Code:
    var tpl = Ext.create('Skirtle.CTemplate',
       
        '<tpl for=".">',  
            '<div class="historyRecord"><span class="title">{title}</span><span class="close">{button}</span></div>', 
        '</tpl>'
    );
    
    dataview.tpl = tpl;

  2. #12
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Quote Originally Posted by terryfritsch View Post
    Does anyone have an example of using this plugin with a dataview?
    IE's idiosyncrasies made this a little trickier than I was expecting. If you try to reuse the same component across multiple view refreshes it'll get nuked by IE's overzealous DOM clean-up. Creating a new component each time seems to work fine though:

    Code:
    var tpl = new Skirtle.CTemplate(
        '<tpl for=".">',
            '<div class="item">{button}</div>',
        '</tpl>'
    );
    
    Ext.define('MyView', {
        extend: 'Ext.view.View',
    
        prepareData: function(data) {
            this.callParent(arguments);
    
            data.button = new Ext.button.Button({text: data.text});
    
            return data;
        }
    });
    
    new MyView({
        itemSelector: 'item',
        tpl: tpl,
        store: {
            autoLoad: true,
            data: [{text: 'Red'}, {text: 'Green'}, {text: 'Blue'}],
            fields: ['text']
        }
    });
    Note that I'm not destroying any of the button components I create so if you follow this example as-is it'll leak like crazy. You'd need to keep track of the components created and destroy them at an appropriate time.

  3. #13
    Sencha User Jad's Avatar
    Join Date
    Feb 2012
    Location
    annecy france
    Posts
    61
    Vote Rating
    1
    Jad is on a distinguished road

      0  

    Default Any update for 4.1

    Any update for 4.1


    Hello

    Any update for 4.1 ?

  4. #14
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    52
    Vote Rating
    2
    mikih is on a distinguished road

      0  

    Default


    Hello,

    first thanks for your efforts skirtle!

    have you got it working for 4.1? I got it working for the Grid Column by commenting
    Code:
    this.createAlias('apply', 'applyTemplate');
    in CTemplate.js which was casung an infite loop.

    and then amending Component.js by changing

    Code:
    return this.tpl.apply(data);
    to

    Code:
    return this.tpl.applyTemplate(data);

    I can't get it working for a Dataview which was my initial intention :/

    With the above example I get the following error for the callParent in the prepareData function:

    Code:
    Uncaught Error: this.callParent() was called but there's no such method (collectData) found in the parent class (Ext.Component) ext-dev.js:6255
    Base.implement.callParent ext-dev.js:6255
    Ext.define.items.prepareData ProductBasket.js:17
    Ext.define.collectData AbstractView.js:636
    Ext.define.refresh AbstractView.js:488
    Base.implement.callParent ext-dev.js:6260
    Ext.define.refresh View.js:675
    (anonymous function) AbstractView.js:857
    (anonymous function) ext-dev.js:2951

    Normal variables get replaced but my component stays [object Object]...

    this is my code:

    Code:
    Ext.define('XXXX.view.orders.new.ProductBasket', {
    	extend: 'Ext.panel.Panel',
    	requires: ['Ext.ux.CTemplate'],
    	alias: 'widget.ordersNewProductBasket',
    	locales: {
    		title: 'orders.new.selectProducts.basket.title'
    	},
    	height: 300,
    	items: [
    		{
    			xtype: 'dataview',
    			store: Ext.getStore('SelectProducts'),
    			itemSelector: 'item',
    			tpl: Ext.create('Ext.ux.CTemplate','<tpl for="."><div class="item">x{label}x {itemrenderer}</div></tpl>'),
    			prepareData: function(data, index, record) {
    				console.log('prepareData data, this', data, this);
    				// this.callParent(arguments);
    				data.label = data.id;
    				data.itemrenderer = Ext.create('Ext.container.Container', {
    					// layout: 'absolut',
    					items: [
    						{
    							xtype: 'label',
    							text: data.id
    						},
    						{
    							xtype: 'label',
    							text: data.materialDescription
    						},
    						{
    							xtype: 'spinnerfield'
    						},
    						{
    							xtype: 'button',
    							iconCls: 'delete'
    						}
    					]
    				});
    
    
    				// this.tpl.applyTemplate(data);
    				// data.button = new Ext.button.Button({text: data.text});
    
    
    				return data;
    			}
    		}
    	]
    });
    Dont be confused I moed the CTemplate into my Ext.ux namespace

    Thanks a lot!


    This would be so powerful... I really get so sad everythime I see great functionality in Sencha Touch (DataView useComponents), not being shared as always promised by sencha!!! What a waste of time always :/

  5. #15
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      3  

    Default


    @mikih. I've been working on new versions of CTemplate and Component Column this weekend. I'm struggling a little to get it to work with ExtJS 4.1.1 and IE in a few edge cases but I'm getting there.

    I would advise you to rollback the changes you've made to CTemplate and Component Column and just make the changes I've recommended previously. To reiterate, the changes required to make it work with 4.1 are:
    1. Line 26. Rename applyTemplate to apply.
    2. Line 174. Switch round apply and applyTemplate.

    That's it. You don't need to change Component Column at all.

    In your DataView example you've made a mistake in how you've overridden prepareData. You can't just override a method via a config option like that if you want to use callParent. To fix it you can either create a proper subclass of the DataView (as I did in my example) or you can use xhooks.

    Once I fixed that mistake your code ran fine for me.

  6. #16
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    52
    Vote Rating
    2
    mikih is on a distinguished road

      0  

    Default


    all working! Thank you very much for your time, especially on the weekend!

    is there a way to do a donation? Then I will make that call in the next scrum.. you saved us a lot of time

    Always more fun to share with everyone ey!


    Cheers

    Florian

  7. #17
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    52
    Vote Rating
    2
    mikih is on a distinguished road

      0  

    Default


    Do you have any plans or ideas to get in working with componentquery? The component lifecircle is broken with that approach.

    I can to a query like this 'numberfield[name="test"]' but I cant define a nested selector like 'view1 grid2 numberfield[name="test"]'.


    This feature is so powerful


    Cheers

    Florian

  8. #18
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I already have component queries working with Component Column, that'll be in 1.1. To use them with a DataView it'd be something like this:

    Code:
    Ext.define('MyView', {
        extend: 'Ext.view.View',
    
        initComponent: function() {
            this.childCmps = [];
            this.callParent();
        },
    
        getRefItems: function(deep) {
            var items = [],
                childCmps = this.childCmps,
                index = 0,
                len = childCmps.length,
                item;
    
            for ( ; index < len ; index++) {
                item = childCmps[index];
                items.push(item);
    
                if (deep && item.getRefItems) {
                    items.push.apply(items, item.getRefItems(true));
                }
            }
    
            return items;
        },
    
        prepareData: function(data) {
            var me = this,
                childCmps = me.childCmps,
                button;
    
            me.callParent(arguments);
    
            button = data.button = new Ext.button.Button({
                text: data.text,
    
                // For parent queries
                getBubbleTarget: function() {
                    return me;
                }
            });
    
            // For child queries
            childCmps.push(button);
    
            return data;
        }
    });
    As I noted earlier, this example leaks components really badly. Every time the view is refreshed it'll add a new set of components to the list of child items. Fixing that in the general case is a little involved but it should be easy enough for you to destroy the children and remove them from the array as appropriate to your specific use cases.

  9. #19
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    sole10g is on a distinguished road

      0  

    Default Adding input text and button in dinamic data grid headers

    Adding input text and button in dinamic data grid headers


    Hi everyone.

    I'm new in extJS and my knowledge is pretty bad.
    I'm trying to add this template method into my grid, wich is created dynamically.
    I don't have a "columns" definition in my grid, instead of that the data structure is sent from the server.
    What I need is adding an input and a button in each column header, modifying the column metadata when the store load data.
    Can anyone please send me a complete example of that component use or give me some clues about how to do that I need?.

    I really appreciate any help that you can offer to me.

  10. #20
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @sole10g. You need to break the problem down.
    1. Create a normal grid that looks roughly the way you want your grid to look.
    2. Add the input and button to the header.
    3. Use reconfigure to set the columns dynamically.
    4. Add the reconfigure into the relevant server callback.

    For step 2, you should be able to base this on the combobox example from the CTemplate page on my website. You'll probably want to wrap the button and input in a container with a suitable layout (hbox maybe?). You might also want to consider using a triggerfield to get the input and button all in one.

    Before embarking on a customisation like this you might also like to consider whether something like the official filtering extension would get you what you need without having to resort to a community ux:

    http://dev.sencha.com/deploy/ext-4.1...ter-local.html