[CLOSED] Extjs How to Create dynamic group columns ?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Extjs How to Create dynamic group columns ?

    Example

    // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columnLines: true,
            columns: [{
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            }, {
                text: 'Stock Price',
                columns: [{
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                }, {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                }, {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                }]
            }, {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }],
            height: 350,
            width: 600,
            title: 'Grouped Header Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true
            }
        });

    mycode

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            Ext.onReady(function() {
                var store = App.Store1;
    
                store.add({ id: 1, relation: 0, dataCod: 'col1', dataText: 'COL1' });
                store.add({ id: 2, relation: 0, dataCod: 'col2', dataText: 'COL2' });
                store.add({ id: 3, relation: 2, dataCod: 'col3', dataText: 'COL3' });
                store.add({ id: 4, relation: 2, dataCod: 'col4', dataText: 'COL4' });
            });
    
            function fncNewColumn(record) {
                return Ext.create('Ext.grid.column.Column', { dataIndex: record.get('dataCod'), text: record.get('dataText'), flex: 1, editor: { xtype: 'textfield', allowBlank: false } } );
            }
    
            function fncAddAndCheckChildColumn(column, store, sourceRecord) {
                var dwFilter = store.query('relation', sourceRecord.get('id'));
    
                Ext.each(dwFilter.items, function (donRecord) {
                    var newColumn = column.add(fncNewColumn(donRecord));
    
                    //add and check child columns
                    fncAddAndCheckChildColumn(newColumn, store, donRecord);
    
                    console.log(sourceRecord.get('id'), sourceRecord.get('relation'), sourceRecord.get('dataCod'), sourceRecord.get('dataText'), donRecord.get('id'), donRecord.get('relation'), donRecord.get('dataCod'), donRecord.get('dataText'));
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Store runat="server" ID="Store1" AutoLoad="false">
                <Model>
                    <ext:Model runat="server" IDProperty="id">
                        <Fields>
                            <ext:ModelField Name="id" Type="Int" />
                            <ext:ModelField Name="relation" Type="Int" />
                            <ext:ModelField Name="dataCod" Type="String" />
                            <ext:ModelField Name="dataText" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel runat="server" ID="GridPanel1" />
            <ext:Button runat="server" Text="Create">
                <Listeners>
                    <Click Handler="
                        var com = App.GridPanel1;
                        var store = App.Store1;
    
                        Ext.each(com.headerCt.getGridColumns(), function (donCol) {
                            com.headerCt.remove(donCol);
                        });
    
                        //add root columns
                        var dwFilterRoot = store.query('relation', 0);
                        Ext.each(dwFilterRoot.items, function (donRecord) {
                            var newColumn = com.headerCt.insert(com.columns.length-1, fncNewColumn(donRecord));
                            
                            //add and check child columns
                            fncAddAndCheckChildColumn(newColumn, store, donRecord);
                            console.log('root Columns', donRecord.get('id'), donRecord.get('relation'), donRecord.get('dataCod'), donRecord.get('dataText'));
                        });
    
                        com.getView().refresh();
                        com.reconfigure();
                        " />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 31, 2015 at 7:11 AM. Reason: [CLOSED]
  2. #2
    Hi @siyahgul,

    I think the best would be to pass an array of Column configuration objects into a GridPanel's .reconfigure() call.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var createColumns = function () {
                var grid = App.GridPanel1;
    
                grid.reconfigure(null, [{
                        text     : 'Company',
                        flex     : 1,
                        sortable : false,
                        dataIndex: 'company'
                    }, {
                        text: 'Stock Price',
                        columns: [{
                            text     : 'Price',
                            width    : 75,
                            sortable : true,
                            renderer : 'usMoney',
                            dataIndex: 'price'
                        }, {
                            text     : 'Change',
                            width    : 75,
                            sortable : true,
                            dataIndex: 'change'
                        }, {
                            text     : '% Change',
                            width    : 75,
                            sortable : true,
                            dataIndex: 'pctChange'
                        }]
                    }, {
                        text     : 'Last Updated',
                        width    : 85,
                        sortable : true,
                        renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                        dataIndex: 'lastChange'
                    }
                ]);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Create columns" Handler="createColumns" />
    
            <ext:GridPanel ID="GridPanel1" runat="server" Width="500">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    So first a "ArrayList" into value add "recursive" After "reconfigure ()" I call the method.

    Running my code thank you. but column flex proplem. columns to right align.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            Ext.onReady(function() {
                var store = App.Store1;
    
                store.add({ id: 1, relation: 0, dataCod: 'col1', dataText: 'COL1' });
                store.add({ id: 2, relation: 0, dataCod: 'col2', dataText: 'COL2' });
                store.add({ id: 3, relation: 2, dataCod: 'col3', dataText: 'COL3' });
                store.add({ id: 4, relation: 2, dataCod: 'col4', dataText: 'COL4' });
            });
    
            function fncNewColumn(record) {
                return Ext.create('Ext.grid.column.Column', { dataIndex: record.get('dataCod'), text: record.get('dataText'), flex: 1, editor: { xtype: 'textfield', allowBlank: false } } );
            }
    
            function fncAddAndCheckChildColumn(column, store, sourceRecord) {
                var dwFilter = store.query('relation', sourceRecord.get('id'));
    
                Ext.each(dwFilter.items, function (donRecord) {
    
                    //add code : check columns property
                    if (column.columns == null) {
                        column.columns = [];
                    }
    
                    //var newColumn = column.add(fncNewColumn(donRecord)); //delete code
                    var newColumn = fncNewColumn(donRecord).initialConfig; //change code  get initialConfig
    
                    column.columns.push(newColumn); //add code : new column in sourcecolumn
    
                    //add and check child columns
                    fncAddAndCheckChildColumn(newColumn, store, donRecord);
    
                    console.log(sourceRecord.get('id'), sourceRecord.get('relation'), sourceRecord.get('dataCod'), sourceRecord.get('dataText'), donRecord.get('id'), donRecord.get('relation'), donRecord.get('dataCod'), donRecord.get('dataText'));
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Store runat="server" ID="Store1" AutoLoad="false">
                <Model>
                    <ext:Model runat="server" IDProperty="id">
                        <Fields>
                            <ext:ModelField Name="id" Type="Int" />
                            <ext:ModelField Name="relation" Type="Int" />
                            <ext:ModelField Name="dataCod" Type="String" />
                            <ext:ModelField Name="dataText" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel runat="server" ID="GridPanel1" />
    
            <ext:Button runat="server" Text="Create">
                <Listeners>
                    <Click Handler="
                        var com = App.GridPanel1;
                        var store = App.Store1;
    
                        //remove all columns
                        Ext.each(com.headerCt.getGridColumns(), function (donCol) {
                            com.headerCt.remove(donCol);
                        });
    
                        //tempory column arraylist
                        var tempColumnList = [];
    
                        //add root columns in tempory arraylist
                        var dwFilterRoot = store.query('relation', 0);
                        Ext.each(dwFilterRoot.items, function (donRecord) {
                            //var newColumn = com.headerCt.insert(com.columns.length-1, fncNewColumn(donRecord)); //delete code
                            var newColumn = fncNewColumn(donRecord).initialConfig; //add code : get initialConfig
                            
                            tempColumnList.push(newColumn); //add code: new column in tempColumnList
                                                    
                            //add and check child columns
                            fncAddAndCheckChildColumn(newColumn, store, donRecord);
                            console.log('root Columns', donRecord.get('id'), donRecord.get('relation'), donRecord.get('dataCod'), donRecord.get('dataText'));
                        });
    
                        //com.viewConfig.stripeRows = true; //delete code
                        //com.getView().refresh(); //delete code
                        com.reconfigure(null, tempColumnList);
                        " />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
  4. #4
    but column flex proplem. columns to right align.
    Yes, a Column's flex setting makes that Column to fit all the available space. To get rid of that behavior you should remove flex: 1.
  5. #5
    This time left align. I want to be percent of all colon. How do I do this?
  6. #6
    There is no way to set it in percentages, but Flex might be used.

    For example, if you have two columns and set Flex="1" for both, it will be actually treated as 50% for both the columns.

    Another example would be setting Flex="3" for one column and Flex="1" for another. It would be treated as 75% and 25%.

    Unfortunately, there is a problem - the Flex setting is not supported for group columns and its inner columns. There is an Issue logged for that:
    https://github.com/extnet/Ext.NET/issues/89

    You can only use Flex for non-group columns.
  7. #7
    I did not understand. Can you give an example?
    columns:
    [
        { dataIndex: 'id', text: 'ID', flex: 1 },
        { text: 'col1', dataIndex: 'col1', flex: 1 },
        {
            dataIndex: 'col2', text: 'Col2', flex: 3,
            columns: [
                { dataIndex: 'col3', text: 'Col3', flex: 1 },
                { dataIndex: 'col4', text: 'Col4', flex: 1 }
            ]
        }
    ]
    is this true?
  8. #8
    As I stated in my post a flex setting cannot be used for group columns and its inner columns. Unfortunately.
  9. #9
    Do you plan to add? :)
  10. #10
    Unfortunately, I don't think it is going to appear in Ext.NET v3. Maybe, in the next major release.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Columns in group header (GridPanel)
    By exe in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 13, 2015, 8:00 PM
  2. [CLOSED] Group columns in Razor
    By AmitM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 19, 2013, 6:34 AM
  3. [CLOSED] Extjs Charts and Group By Question
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 12, 2012, 4:07 PM
  4. Group columns by dragging them into a group panel
    By pj_martins in forum 1.x Help
    Replies: 1
    Last Post: Aug 08, 2011, 6:07 PM
  5. Replies: 13
    Last Post: Jun 07, 2011, 5:45 AM

Posting Permissions