Results 1 to 6 of 6

Thread: hi, does any one help me on export the excelsheet in extjs4.1

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    13

    Default hi, does any one help me on export the excelsheet in extjs4.1

    My code is:-
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
    <script type="text/javascript" src="FormWithExcel.js"></script>
    <!--<script type="text/javascript" src="export.js"></script>-->
    <!--<link href='resources/css/ext-all.css' rel='stylesheet' type='text/css' />
    <script src="adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="ext-all.js" type="text/javascript"></script>-->
    <script src="Exporter-all.js" type="text/javascript"></script>
    </head>
    </html>
    Ext.onReady(function(){


    var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
    "abbr": "computer scince",
    "name": "computer scince"
    }, {
    "abbr": "B.A",
    "name": "B.A"
    }, {
    "abbr": "B.com",
    "name": "B.com"
    }, {
    "abbr": "BCA",
    "name": "BCA"
    }, {
    "abbr": "MBA",
    "name": "MBA"
    }, {
    "abbr": "MCA",
    "name": "MCA"
    }, {
    "abbr": "M.com",
    "name": "M.com"
    } //...
    ]
    });
    var myform = new Ext.form.FormPanel({
    bodyPadding: 18,
    width: 280,
    height: 300,
    collapsible: true,
    frame: true,
    title: 'Registration Form',
    style: 'padding-bottom: 5px',
    style: 'padding-left: 15px',
    id: 'formm',
    items: [{
    xtype: 'textfield',
    fieldLabel: 'First Name',
    name: 'text1',
    allowBlank: false,
    width: 220,
    id: 'text1',

    }, {
    xtype: 'textfield',
    fieldLabel: 'Last Name',
    name: 'text2',
    allowBlank: false,
    width: 220,
    id: 'text2'
    }, {
    xtype: 'textfield',
    vtype: 'email',
    fieldLabel: 'Email',
    allowBlank: false,
    name: 'email',
    width: 220

    }, {
    xtype: 'numberfield',
    //anchor:'100%',
    id: 'phone',
    fieldLabel: 'Contact No.',
    //minvalue:0,
    hideTrigger: true,
    keyNavEnabled: false,
    mouseWheelEnabled: false,
    name: 'phone',
    allowBlank: false,
    width: 220

    }, {
    xtype: 'radio',
    fieldLabel: 'Select Gender',
    boxLabel: 'Male',
    name: 'radio1',
    id: 'radio1',
    checked: true,
    inputValue: 'Male'
    }, {

    xtype: 'radio',
    padding: '0 0 0 105',
    boxLabel: 'Female',
    name: 'radio1',
    id: 'rd2',
    inputValue: 'Female'
    }, {
    xtype: 'combo',
    fieldLabel: 'Select Subject',
    // emptyText: "Select Subject...",
    id: 'combo1',
    name: 'combo1',
    allowBlank: false,
    width: 220,
    store: states,
    valueField: 'abbr',
    displayField: 'name',
    renderTo: Ext.getBody()
    }, {
    xtype: 'fieldcontainer',
    fieldLabel: 'Select ',
    defaultType: 'checkboxfield',
    items: [{
    boxLabel: 'part Time',
    name: 'topping',
    inputValue: '1',
    id: 'checkbox1'
    }, {
    boxLabel: 'Full TIme',
    name: 'topping',
    inputValue: '2',

    id: 'checkbox2'
    }]
    }],
    buttons: [{
    text: 'Submit',
    handler: function(){
    values = myform.getValues();
    if (myform.getForm().isValid()) {
    Ext.Ajax.request({
    url: 'FormWithExcel.php',
    params: {
    firstname: values.text1,
    lastname: values.text2,
    email: values.email,
    phone: values.phone
    },
    method: 'POST',
    success: function(response){
    Ext.MessageBox.alert('Success', 'Data Save success ');
    },
    failure: function(result){
    Ext.MessageBox.alert('failure', 'Data failure' + result.responseText);
    }
    });
    }
    }
    }, {
    text: 'Reset',
    handler: function(){
    myform.getForm().reset();
    },

    }],
    renderTo: Ext.getBody()
    });

    var stored = Ext.create('Ext.data.Store', {
    fields: ['firstname', 'lastname', 'email', 'phone'],
    autoLoad: true,
    proxy: {
    type: 'ajax',
    url: 'excelsheet.php',
    reader: {
    type: 'json',
    root: 'sdata'
    }
    }



    });

    var gridd = Ext.create('Ext.grid.Panel', {
    title: 'Selective Grid',
    collapsible: true,
    id:'grid',
    closable: true,
    style: 'padding-left: 15px',
    width: 800,
    store: stored,

    /* plugins: [Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 1,
    pluginId: 'rowEditing'
    })],*/
    dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
    xtype: 'button',
    text: 'Export',
    id: 'linkButton',
    handler: function(){
    //alert("ghhkj");
    window.location='data:appliaction/vnd.ms-excel;base64,'+Base64.encode(grid.getExcelXml());
    },
    }],
    }],
    columns: [{
    text: 'firstname',
    sortable: true,
    dataIndex: 'firstname'
    }, {
    text: 'lastname',

    dataIndex: 'lastname'
    }, {
    text: 'email',
    flex: 1,
    dataIndex: 'email'
    }, {
    text: 'phone',
    dataIndex: 'phone'
    }],
    renderTo: Ext.getBody()
    });
    /*Ext.create('Ext.button.Button',{
    text:'Download as .xls',
    handler:function(button){
    var gridPanel=button.up('gridd');
    var dataURL='data:application/vnd.ms-excel;base64,'+Ext.ux.exporter.Exporter.exportGrid(gridPanel);
    window.location.href=dataURL;
    gridd.getTopToolbar().add(exportButton);
    }
    })*/
    /*var exportButton = new Ext.ux.Exporter.Button({
    component:gridPanel ,
    text : "Download as .xls"
    });

    gridd.getTopToolbar().add(exportButton);*/
    });
    **
    *
    * Base64 encode / decode
    * http://www.webtoolkit.info/
    *
    **/


    var Base64 = (function() {


    // private property
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";


    // private method for UTF-8 encoding
    function utf8Encode(string) {
    string = string.replace(/\r\n/g,"\n");
    var utftext = "";
    for (var n = 0; n < string.length; n++) {
    var c = string.charCodeAt(n);
    if (c < 128) {
    utftext += String.fromCharCode(c);
    }
    else if((c > 127) && (c < 2048)) {
    utftext += String.fromCharCode((c >> 6) | 192);
    utftext += String.fromCharCode((c & 63) | 128);
    }
    else {
    utftext += String.fromCharCode((c >> 12) | 224);
    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
    utftext += String.fromCharCode((c & 63) | 128);
    }
    }
    return utftext;
    }


    // public method for encoding
    return {
    encode : (typeof btoa == 'function') ? function(input) { return btoa(input); } : function (input) {
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    input = utf8Encode(input);
    while (i < input.length) {
    chr1 = input.charCodeAt(i++);
    chr2 = input.charCodeAt(i++);
    chr3 = input.charCodeAt(i++);
    enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;
    if (isNaN(chr2)) {
    enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
    enc4 = 64;
    }
    output = output +
    keyStr.charAt(enc1) + keyStr.charAt(enc2) +
    keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
    }
    };
    })();


    Ext.LinkButton = Ext.extend(Ext.Button, {
    template: new Ext.Template(
    '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
    '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><a class="x-btn-text" href="{1}" target="{2}">{0}</a></td><td class="x-btn-right"><i> </i></td>',
    "</tr></tbody></table>"),

    onRender: function(ct, position){
    var btn, targs = [this.text || ' ', this.href, this.target || "_self"];
    if(position){
    btn = this.template.insertBefore(position, targs, true);
    }else{
    btn = this.template.append(ct, targs, true);
    }
    var btnEl = btn.child("a:first");
    btnEl.on('focus', this.onFocus, this);
    btnEl.on('blur', this.onBlur, this);


    this.initButtonEl(btn, btnEl);
    Ext.ButtonToggleMgr.register(this);
    },


    onClick : function(e){
    if(e.button != 0){
    return;
    }
    if(!this.disabled){
    this.fireEvent("click", this, e);
    if(this.handler){
    this.handler.call(this.scope || this, this, e);
    }
    }
    }


    });


    Ext.override(Ext.grid.GridPanel, {
    getExcelXml: function(includeHidden) {
    var worksheet = this.createWorksheet(includeHidden);
    var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
    return '<?xml version="1.0" encoding="utf-8"?>' +
    '<ss:Workbook xmlnss="urnchemas-microsoft-com:officepreadsheet" xmlns:x="urnchemas-microsoft-com:office:excel" xmlns:o="urnchemas-microsoft-com:office:office">' +
    '<oocumentProperties><o:Title>' + this.title + '</o:Title></oocumentProperties>' +
    '<ss:ExcelWorkbook>' +
    '<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
    '<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
    '<ss:ProtectStructure>False</ss:ProtectStructure>' +
    '<ss:ProtectWindows>False</ss:ProtectWindows>' +
    '</ss:ExcelWorkbook>' +
    '<ss:Styles>' +
    '<ss:Style ss:ID="Default">' +
    '<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
    '<ss:Font ss:FontName="arial" ss:Size="10" />' +
    '<ss:Borders>' +
    '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
    '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
    '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
    '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
    '</ss:Borders>' +
    '<ss:Interior />' +
    '<ss:NumberFormat />' +
    '<ss:Protection />' +
    '</ss:Style>' +
    '<ss:Style ss:ID="title">' +
    '<ss:Borders />' +
    '<ss:Font />' +
    '<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
    '<ss:NumberFormat ss:Format="@" />' +
    '</ss:Style>' +
    '<ss:Style ss:ID="headercell">' +
    '<ss:Font ss:Bold="1" ss:Size="10" />' +
    '<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
    '<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
    '</ss:Style>' +
    '<ss:Style ss:ID="even">' +
    '<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
    '</ss:Style>' +
    '<ss:Style ss:Parent="even" ss:ID="evendate">' +
    '<ss:NumberFormat ss:Format="[ENG][$-409]dd\-mmm\-yyyy;@" />' +
    '</ss:Style>' +
    '<ss:Style ss:Parent="even" ss:ID="evenint">' +
    '<ss:NumberFormat ss:Format="0" />' +
    '</ss:Style>' +
    '<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
    '<ss:NumberFormat ss:Format="0.00" />' +
    '</ss:Style>' +
    '<ss:Style ss:ID="odd">' +
    '<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
    '</ss:Style>' +
    '<ss:Style ss:Parent="odd" ss:ID="odddate">' +
    '<ss:NumberFormat ss:Format="[ENG][$-409]dd\-mmm\-yyyy;@" />' +
    '</ss:Style>' +
    '<ss:Style ss:Parent="odd" ss:ID="oddint">' +
    '<ss:NumberFormat ss:Format="0" />' +
    '</ss:Style>' +
    '<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
    '<ss:NumberFormat ss:Format="0.00" />' +
    '</ss:Style>' +
    '</ss:Styles>' +
    worksheet.xml +
    '</ss:Workbook>';
    },


    createWorksheet: function(includeHidden) {


    // Calculate cell data types and extra class names which affect formatting
    var cellType = [];
    var cellTypeClass = [];
    var cm = this.get(View().getHeaderCt());
    var totalWidthInPixels = 0;
    var colXml = '';
    var headerXml = '';
    for (var i = 0; i < cm.getColumnCount(); i++) {
    if (includeHidden || !cm.isHidden(i)) {
    var w = cm.getColumnWidth(i)
    totalWidthInPixels += w;
    colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
    headerXml += '<ss:Cell ss:StyleID="headercell">' +
    '<ssata ss:Type="String">' + cm.getColumnHeader(i) + '</ssata>' +
    '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
    var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));
    switch(fld.type) {
    case "int":
    cellType.push("Number");
    cellTypeClass.push("int");
    break;
    case "float":
    cellType.push("Number");
    cellTypeClass.push("float");
    break;
    case "bool":
    case "boolean":
    cellType.push("String");
    cellTypeClass.push("");
    break;
    case "date":
    cellType.push("DateTime");
    cellTypeClass.push("date");
    break;
    default:
    cellType.push("String");
    cellTypeClass.push("");
    break;
    }
    }
    }
    var visibleColumnCount = cellType.length;


    var result = {
    height: 9000,
    width: Math.floor(totalWidthInPixels * 30) + 50
    };


    // Generate worksheet header details.
    var t = '<ss:Worksheet ss:Name="' + this.title + '">' +
    '<ss:Names>' +
    '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + this.title + '\'!R1:R2" />' +
    '</ss:Names>' +
    '<ss:Table x:FullRows="1" x:FullColumns="1"' +
    ' ss:ExpandedColumnCount="' + visibleColumnCount +
    '" ss:ExpandedRowCount="' + (this.store.getCount() + 2) + '">' +
    colXml +
    '<ss:Row ss:Height="38">' +
    '<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '">' +
    '<ssata xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
    '<html:B><html:U><html:Font html:Size="15">' + this.title +
    '</html:Font></html:U></html:B></ssata><ss:NamedCell ss:Name="Print_Titles" />' +
    '</ss:Cell>' +
    '</ss:Row>' +
    '<ss:Row ss:AutoFitHeight="1">' +
    headerXml +
    '</ss:Row>';


    // Generate the data rows from the data in the Store
    for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
    t += '<ss:Row>';
    var cellClass = (i & 1) ? 'odd' : 'even';
    r = it[i].data;
    var k = 0;
    for (var j = 0; j < cm.getColumnCount(); j++) {
    if (includeHidden || !cm.isHidden(j)) {
    var v = r[cm.getDataIndex(j)];
    t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ssata ss:Type="' + cellType[k] + '">';
    if (cellType[k] == 'DateTime') {
    t += v.format('Y-m-d');
    } else {
    t += v;
    }
    t +='</ssata></ss:Cell>';
    k++;
    }
    }
    t += '</ss:Row>';
    }


    result.xml = t + '</ss:Table>' +
    '<x:WorksheetOptions>' +
    '<x:PageSetup>' +
    '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
    '<x:Footer xata="Page &amp;P of &amp;N" x:Margin="0.5" />' +
    '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
    '</x:PageSetup>' +
    '<x:FitToPage />' +
    '<x:Print>' +
    '<x:PrintErrors>Blank</x:PrintErrors>' +
    '<x:FitWidth>1</x:FitWidth>' +
    '<x:FitHeight>32767</x:FitHeight>' +
    '<x:ValidPrinterInfo />' +
    '<x:VerticalResolution>600</x:VerticalResolution>' +
    '</x:Print>' +
    '<x:Selected />' +
    '<xoNotDisplayGridlines />' +
    '<x:ProtectObjects>False</x:ProtectObjects>' +
    '<x:ProtectScenarios>False</x:ProtectScenarios>' +
    '</x:WorksheetOptions>' +
    '</ss:Worksheet>';
    return result;
    },


    });

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    13

    Default plz help me

    plz someone helpme ,thnx in advance.....

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    What are you using to create your XLS? Extension or your code?

    I usually prefer to use server side solutions for printing documents.

    Regards,
    Scott.

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    13

    Default thnx 4 seen..

    I have use
    window.location='data:appliaction/vnd.ms-excel;base64,'+Base64.encode(Ext.getCmp('grid').getExcelXml())
    to get the excelfile...

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Are you having problems displaying the XLS, or it is not created properly? Are you saving it locally?
    Please provide more details as to what problem you are having exactly.

    Regards,
    Scott

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Location
    Indore, India
    Posts
    26
    Answers
    3

    Default

    Hi All,

    but when I export to word or Excel then downloaded file does not show extension .doc or xls.

    Thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •