How to export only visible colm. in GridPanel

 <mce:script type="text/javascript"><!-- function setFields(grid, hiddenFormat, hiddenColConfig, format) { hiddenFormat.setValue(format); // Calculate hidden columns. var hidden = '<columns>'; var i; var visible; for (i = 0; i < grid.colModel.columns.length; i++) { hidden = hidden + '<column '; hidden = hidden + 'dataField="' + grid.colModel.columns[i].dataIndex + '"'; visible = grid.colModel.columns[i].hidden == undefined ? true : !grid.colModel.columns[i].hidden; hidden = hidden + ' visible="' + visible.toString() + '"/>'; hidden = hidden + ' index="' + i.toString() + '"/>'; } hidden = hidden + '</columns>'; hiddenColConfig.setValue(hidden); } // --></mce:script> <ext:Store runat="server" ID="store1"> <Reader> <ext:JsonReader> <Fields> </Fields> </ext:JsonReader> </Reader> <Listeners> <LoadException Handler="Ext.Msg.alert('Members - Load failed', e.message || e )" /> </Listeners> </ext:Store> <ext:Hidden ID="FormatType" runat="server" /> <ext:Hidden ID="ColConfig" runat="server" /> <ext:GridPanel runat="server" ID="gridPanel1" StoreID="store1" Title="Members" BodyBorder="true" Border="true" Header="true" Height="400px" TrackMouseOver="true" Icon="Table"> <ColumnModel runat="server"> <Columns> <ext:RowNumbererColumn /> </Columns> </ColumnModel> <SelectionModel> <ext:RowSelectionModel runat="server" SingleSelect="false"></ext:RowSelectionModel> </SelectionModel> <LoadMask ShowMask="true" /> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:ToolbarFill runat="server" /> <ext:Button runat="server" ID="btnExcel" Text="To Excel" Icon="PageExcel" AutoPostBack="true"> <Listeners> <Click Handler="setFields(#{gridPanel1}, #{FormatType}, #{ColConfig}, 'Excel');" /> </Listeners> </ext:Button> <ext:Button runat="server" ID="btnCSV" Text="To CSV" Icon="PageAttach" AutoPostBack="true"> <Listeners> <Click Handler="setFields(#{gridPanel1}, #{FormatType}, #{ColConfig}, 'CSV');" /> </Listeners> </ext:Button> <ext:Button runat="server" ID="btnXml" Text="To XML" Icon="PageCode" AutoPostBack="true"> <Listeners> <Click Handler="setFields(#{gridPanel1}, #{FormatType}, #{ColConfig}, 'XML');" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </TopBar> <BottomBar> <ext:PagingToolBar runat="server" ID="pager1" PageSize="50" StoreID="store1"> <Items> <ext:Label runat="server" ForID="txtPageSize" Html="  Page Size  " /> <ext:NumberField runat="server" ID="txtPageSize" AllowBlank="false" AllowDecimals="false" AllowNegative="false" FieldLabel="Page Size" MinValue="1" MaxValue="10000" Width="40"> </ext:NumberField> <ext:Button runat="server" Text="Apply"> <Listeners> <Click Handler="#{pager1}.pageSize = parseInt(#{txtPageSize}.getValue()); #{pager1}.doLoad(0);" /> </Listeners> </ext:Button> </Items> </ext:PagingToolBar> </BottomBar> </ext:GridPanel>