1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    14
    Vote Rating
    0
    kloffy is on a distinguished road

      0  

    Default Combine multiple fields from model in one grid column

    Combine multiple fields from model in one grid column


    Is it possible to create a column like this (This doesn't work, it's just how I imagine it could look like.):

    Code:
        var reader = new Ext.data.ArrayReader({}, [
            {name: 'first_name', type: 'string'},
            {name: 'last_name', type: 'string'},
            {name: 'age'}
        ]);
    
        var grid = new Ext.grid.GridPanel({
            store: new Ext.data.Store({
                reader: reader,
                data: Ext.grid.dummyData
            }),
    
            columns: [
                {header: 'Full Name', tpl : new Ext.Template('{first_name}, {last_name}')},
                {header: 'Age', dataIndex:'age'}
            ]
       });
    If it is not possible using Templates, maybe it is possible to accomplish this with a Renderer...

  2. #2

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    14
    Vote Rating
    0
    kloffy is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjlecomte View Post
    After a search of the forums, you might find these helpful:
    http://extjs.com/forum/showthread.php?t=28104
    http://extjs.com/forum/showthread.php?t=22188
    Thank you! I wasn't sure what to search for. These look great!

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    If you get it working please post your solution because someone else doing a search will likely stumble across your (newer) thread first. Besides, your solution might be a little different.

  5. #5
    Ext User
    Join Date
    Mar 2008
    Posts
    14
    Vote Rating
    0
    kloffy is on a distinguished road

      0  

    Default


    Quick attempt:

    PHP Code:
    /*
     * Ext JS Library 2.0.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */

    function templateRenderer(template) {
        return function(
    valuemetarecordrowIndexcolIndexstore) {
            return 
    template.applyTemplate(record.data);
        };


    Ext.onReady(function(){

        
    Ext.QuickTips.init();

        
    // shared reader
        
    var reader = new Ext.data.ArrayReader({}, [
           {
    name'first_name'type'string'},
           {
    name'last_name'type'string'},
           {
    name'age'}
        ]);

        var 
    grid = new Ext.grid.GridPanel({
            
    store: new Ext.data.GroupingStore({
                
    readerreader,
                
    dataExt.grid.dummyData,
                
    sortInfo:{field'age'direction"ASC"},
                
    groupField:'age'
            
    }),

            
    columns: [
                {
    header"Name"width60sortabletruerenderer:templateRenderer(new Ext.Template('{first_name}, {last_name}')) },
                {
    header"Age"width20sortabletruedataIndex'age'}
            ],

            
    view: new Ext.grid.GroupingView({
                
    forceFit:true,
                
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            
    }),

        
    animCollapsefalse,
        
    autoHeighttrue,
            
    collapsiblefalse,
        
    framefalse,
        
    hideGroupedColumntrue,
            
    title'Grouping Example',
        
    width400,
            
    renderTodocument.body
        
    });
    });


    // Array data for the grids
    Ext.grid.dummyData = [
        [
    'John','Doe',20],
        [
    'Jack','Doe',20],
        [
    'Jeff','Doe',30],
        [
    'Jill','Doe',30],
        [
    'Jim','Doe',20],
        [
    'Justin','Doe',20]
    ]; 
    Too bad it seems to break the ability to sort by this column. Maybe I'll figure something out later...

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    why templaterenderer? Can't you just use a renderer and transform the data? I think the sorting operates on the record. See the API also check http://extjs.com/deploy/dev/docs/?cl...data.SortTypes

    It all depends what you're going to do ultimately. If you're going to store in db server side than sorting will be handled by your server script, where you can combine the data as well.

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    14
    Vote Rating
    0
    kloffy is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjlecomte View Post
    why templaterenderer? Can't you just use a renderer and transform the data?
    The templateRenderer is there to add more flexibility. I like using the template concept in Ext for formatting. It's nice and easy. Why not use the functionality that's already there? (This is an honest question - is there any reason why I shouldn't use templates?)

    For example, I could have some additional fields another column using the same renderer like that:
    Code:
    {header: "Address", width: 60, sortable: false, renderer:templateRenderer(new Ext.Template('{street_name} {street_number} ({zip} - {state})')) }
    Yes, I also think the sorting operates on the record, which means it's more or less useless when using such a renderer.
    (Or at least I haven't figured anything out yet...)

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Search around so more in the forums. I know this has been brought up before. use the google forum search as well.

  9. #9
    Ext User
    Join Date
    Mar 2008
    Posts
    14
    Vote Rating
    0
    kloffy is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjlecomte View Post
    Search around so more in the forums. I know this has been brought up before. use the google forum search as well.
    Yeah, the sorting problem has popped up in some threads. There hasn't been a good solution to it though. I've found two ways to enable sorting, both are pretty ugly hacks. One involves a custom store that passes the record to the sortType function. The other one uses a dummy object that grabs a reference to the record with the help of a custom renderer. (The renderer has to be called at least once before you can sort using this mehtod, so you'll have to initially sort by another column.)
    Here's the method with a dummy object:
    PHP Code:
    <html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Template Renderer Example</title>
    <
    link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <
    script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>

    <script type="text/javascript">
    function DummyObject()
    {
        this.record=null;
        this.template=new Ext.Template('{first_name}, <i>{last_name}</i>');
    }

    DummyObject.prototype.toString=function()
    {
        return this.record ? this.template.applyTemplate(this.record.data) : '';
    }

    function dummyRenderer() {
        return function(value, meta, record, rowIndex, colIndex, store) {
            if(!value.record) value.record=record;
            return value.toString();
        };
    }

    Ext.onReady(function(){
        Ext.QuickTips.init();

        var template = new Ext.Template('{first_name}, <i>{last_name}</i>');

        // shared reader
        var reader = new Ext.data.ArrayReader({}, [
            {name: 'first_name', type: 'string'},
            {name: 'last_name', type: 'string'},
            {name: 'dummy'},
            {name: 'age'}
        ]);

        var selModel = new Ext.grid.RowSelectionModel({singleSelect:true});

        var grid = new Ext.grid.GridPanel({
            store: new Ext.data.GroupingStore({
                reader: reader,
                data: Ext.grid.dummyData,
                sortInfo:{field: 'age', direction: "ASC"},
                groupField:'age'
            }),

                columns: [
                {header: "Name", width: 60, sortable: true, dataIndex: 'dummy', renderer:dummyRenderer()},
                {header: "Age", width: 20, sortable: true, dataIndex: 'age'}
            ],

            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
                hideGroupedColumn: true,
            }),

            sm: selModel,

            animCollapse: false,
            autoHeight: true,
            collapsible: false,
            frame: false,
            title: 'Template Renderer Example',
            width: 400,
            renderTo: document.body
        });
    });


    // Array data for the grids
    Ext.grid.dummyData = [
        ['John',    'Doe',    new DummyObject(), 20],
        ['Jack',    'Duff',    new DummyObject(), 20],
        ['Jack',    'Doe',    new DummyObject(), 20],
        ['Jeff',    'Doe',    new DummyObject(), 20],
        ['Jill',    'Doe',    new DummyObject(), 30],
        ['Jim',        'Doe',    new DummyObject(), 30],
        ['Justin',    'Depp',    new DummyObject(), 30]
    ];

    </script>
    </head>
    <body>
    </body>
    </html> 
    I'm still hoping to find a better solution...

    Edit: Removed editing functionality to make the code more readable. If you want editing, add this to the grid:
    PHP Code:
             tbar: [
                new 
    Ext.Action({
                    
    text'Edit',
                    
    handler: function(){
                        var 
    first = new Ext.form.TextField({fieldLabel:'First Name'});
                        var 
    last = new Ext.form.TextField({fieldLabel:'Last Name'});

                        
    selModel.on(
                            
    'rowselect'
                            function(
    smrowIndexrecord)
                            {
                                if(!(
    first && last)) return;
                                
                                
    first.rowIndex rowIndex;
                                
    first.record record;
                                
    first.dataIndex 'first_name';

                                
    last.rowIndex rowIndex;
                                
    last.record record;
                                
    last.dataIndex 'last_name';

                                
    first.setValue(record.data['first_name']);
                                
    last.setValue(record.data['last_name']);
                            },
                            
    this
                        
    );
                        
                        var 
    handle = function(e)
                        {
                            if(!
    e) return;

                            
    e.record.set(e.dataIndexe.getValue());
                        }

                        
    first.on('blur'handlethis);

                        
    last.on('blur'handlethis);

                        var 
    editor = new Ext.Window({
                            
    items: [
                                new 
    Ext.FormPanel({
                                    
    items: [
                                        
    first,
                                        
    last
                                    
    ],
                                    
                                    
    autoHeighttrue,
                                    
    labelWidth75
                                
    })
                            ],

                            
    buttons: [{
                                
    text:'Submit',
                                
    disabled:true
                            
    },{
                                
    text'Close',
                                
    handler: function(){
                                    
    editor.hide();
                                }
                            }],
                            
    height200,
                            
    width400,
                            
    renderTodocument.body
                        
    });
                        
    editor.show();
                    }
                })
            ], 

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Just concatenate the two elements in the Record definition. This solution has been posted time and time again:

    Code:
        var reader = new Ext.data.ArrayReader({}, [
            {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'},
            {name: 'age'}
        ]);
    
        var grid = new Ext.grid.GridPanel({
            store: new Ext.data.Store({
                reader: reader,
                data: Ext.grid.dummyData
            }),
    
            columns: [
                {header: 'Full Name', dataIndex: 'full_name'},
                {header: 'Age', dataIndex:'age'}
            ]
       });

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi