Sheet UI in popup window

Use the following steps to add the Sheet UI to a browser page. See online demo for Render sheet in popup window

1: Move all the unzip package into your existing project folder.

2: Open the sheet.html page, add the following CSS file into the page

    <link rel="stylesheet" type="text/css" href="js/extjs4.2.1/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"></link>
    <link rel="stylesheet" type="text/css" href="js/EnterpriseSheet/resources/css/common.css"></link>
    <link rel="stylesheet" type="text/css" href="js/EnterpriseSheet/resources/css/sheet.css"></link>
    <link rel="stylesheet" type="text/css" href="js/EnterpriseSheet/resources/css/toolbar.css"></link>
    <link rel="stylesheet" type="text/css" href="js/EnterpriseSheet/resources/css/icon.css"></link>
    <link rel="stylesheet" type="text/css" href="js/EnterpriseSheet/demo/resources/css/demo.css"></link>
    

3: Add ExtJS library to the page

    <script type="text/javascript" src="js/extjs4.2.1/ext-all.js"></script> 
    

4: Add language JS file to the page.

    <script type="text/javascript" src="js/extjs4.2.1/locale/ext-lang-en.js"></script>
    <script type="text/javascript" src="js/EnterpriseSheet/src/language/en.js"></script>
    

To show chinese language, just replace: en.js as zh_CN.js, ext-lang-en.js as ext-lang-zh_CN.js.

5: Add EnterpriseSheet UI library to the page

   <script type="text/javascript" src="js/EnterpriseSheet/src/EnterpriseSheet/Config.js"></script>
   <script type="text/javascript" src="js/EnterpriseSheet/enterprisesheet.js"></script>
   <script type="text/javascript" src="js/EnterpriseSheet/src/EnterpriseSheet/api/SheetAPI.js"></script>
    

6: Add onReady JS code to the page

Ext.onReady(function(){
    SCONFIG.setupDir('');
            
    // define Global variable, you can use them in your code.
    SHEET_API = Ext.create('EnterpriseSheet.api.SheetAPI', {
        openFileByOnlyLoadDataFlag: true
    });
    SHEET_API_HD = SHEET_API.createSheetApp({});
            
    var win;
    POP_SHEET_WIN = function(){
        if(!win){
            win = Ext.create('Ext.window.Window', {
                resizable : true,
                modal: true,
                buttonAlign : "right",
                closable : true,
                closeAction : 'hide',
                width : 1000,
                height: 600,
                layout : 'fit',
                items: [SHEET_API_HD.appCt],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                },{
                    text: 'Submit',
                    handler: function(){
                        var json = SHEET_API.getJsonData(SHEET_API_HD);
                        alert(Ext.encode(json));
                    }
                }]
            });
        }
        win.show();

        /*
         * normally we suggest call loadData to initial data after the sheet is rendered.
         */
        var b2CellValue = document.getElementById("cellValue").value;
        var json = {
            fileName:"Basic file",
            sheets:[{id:1,name:"First",actived:true,color:"orange"},{id:2,name:"Second"}],
            cells:[{i:1,x:2,y:2,j:"{data: \"" + b2CellValue + "\"}"}]
        };
        SHEET_API.loadData(SHEET_API_HD, json);
    }
});
 	

Tow global variables SHEET_API and SHEET_API_HD are created in here, and you can use them to inject data into the sheet. We will introduce more details in the APIs document.

7: Add a button in the html to trigger popup window

    <input type="button" value="Click here to open sheet with above value in cell B2" onclick="POP_SHEET_WIN()"></input>
    

To see the whole code, please open the index-win.html page in the downloaded package.