Use the following steps to add the Sheet UI to a browser page.
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
<script type="text/javascript">
Ext.onReady(function(){
SCONFIG.setupDir('');
SHEET_API = Ext.create('EnterpriseSheet.api.SheetAPI', {
openFileByOnlyLoadDataFlag: true
});
SHEET_API_HD = SHEET_API.createSheetApp({
renderTo: 'sheet-markup',
style: 'background:white;border-left:1px solid silver;',
height: '100%'
});
document.documentElement.style.background = 'none';
Ext.getBody().setStyle('background-image', 'none');
});
</script>
Two global variables SHEET_API and SHEET_API_HD are created in here, you can use them to inject data into sheet. We introduce more details about them in the APIs document.
7: Create a DOM element DIV to render the Sheet UI.
<body scroll="no">
<div id="sheet-markup" style="height:100%;"></div>
</body>
To see the whole code, please open the index.html page in the downloaded package.