CODEWITHSUNDEEP
javascriptjqueryextjsextjs4
Suresh
Suresh

Reputation: 41

how to Hide the child columns in grid dynamically using ExtJS 4

I need to hide the specific column in grid on load of grid. i.e., child columns. Even i use hidden: true is also not working.

Ext.apply(this, {
            store: App.mcmTaskStore,
            columnLines: true,
            columns: [
                { header: 'P', sortable: false, width: 25, dataIndex: 'Priority', renderer: priorityRenderer }, //false because it's H M L and it sorts alphabetically
                { header: 'START', sortable: true, width: 100, dataIndex: 'StartDateFormatted', hidden: true, renderer: this.mcmCustomRenderer},
                { 
                    header: 'Incoming Flights',
                    columns: [
                        { header: 'FLT', sortable: true, width: 80, dataIndex: 'IncomingFlightNumber', renderer: this.mcmCustomRenderer },
                        { header: 'ETA', sortable: true, width: 120, dataIndex: 'IncomingFlightEta', renderer: startDateCustomRenderer },
                        { header: 'CTY', sortable: true, width: 60, dataIndex: 'IncomingFlightStation', renderer: this.mcmCustomRenderer },
                        { header: 'GT', sortable: true, width: 50, dataIndex: 'IncomingFlightGate', hidden: true, renderer: this.mcmCustomRenderer}
                    ]
                },
                { header: 'END', sortable: true, width: 100, dataIndex: 'EndDateFormatted', hiddden: true, renderer: this.mcmCustomRenderer},
                {
                    text: 'Outgoing Flights',
                    columns: [
                        { header: 'FLT', sortable: true, width: 80, dataIndex: 'OutgoingFlightNumber', renderer: this.mcmCustomRenderer },
                        { header: 'ETD', sortable: true, width: 120, dataIndex: 'OutgoingFlightEtd', renderer: endDateCustomRenderer },
                        { header: 'CTY', sortable: true, width: 60, dataIndex: 'OutgoingFlightStation', renderer: this.mcmCustomRenderer },
                        { header: 'GT', sortable: true, width: 50, dataIndex: 'OutgoingFlightGate', hiddden: true, renderer: this.mcmCustomRenderer}
                    ]
                },
                { header: 'PAX NAME', sortable: true, width: 250, dataIndex: 'Name', renderer: this.mcmCustomRenderer },
                { header: 'COMMENTS', sortable: false, flex: 1, dataIndex: 'Notes', hiddden: true, renderer: this.mcmCustomRenderer},
                { header: 'AGENT NAME', sortable: true, width: 250, dataIndex: 'AgentName', renderer: this.mcmCustomRenderer },
                { header: 'TASK TYPE', sortable: true, width: 120, dataIndex: 'TaskType', renderer: this.mcmCustomRenderer }
            ],
            tbar: mcmTbar
        });

Please help me. Thanks in advance.

Upvotes: 0

Views: 732

Answers (1)

rixo
rixo

Reputation: 25001

You've written 'hiddden' with 3 'd' in some places. I bet that's where it doesn't work.

Upvotes: 2

Related Questions