saas-platform/frontend/saas-web/app/view/sys/guide/FormPanel.js

Ext.define('saas.view.sys.guide.FormPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sys-guide-formpanel',

    layout:'fit',

    cls:'x-guide-background',

    // bodyStyle: {
    //     background: 'url(resources/images/guide/background.png)'
    // },

    initComponent: function () {
        var me = this;
		var view = new Ext.DataView({
            style:"margin:7% 0 7% 0;",
			tpl : new Ext.XTemplate(
				'<div class="x-guide-panel" align ="center">',
                    '<div class="x-guide-item" align ="center" >',
                        '<img cls="afterLine" src="resources/images/guide/baseSet.png" style="margin:0 185px 0 0;" align ="center" width="135" height="90" data-qtip="基础设置" alt="基础设置" onClick="" >',
                        '<img src="resources/images/guide/warehouse.png" style="margin:0 185px 0 0;" align ="center" width="135" height="90" data-qtip="仓库资料" alt="仓库资料" onClick="" >',
                        '<img src="resources/images/guide/product.png" align ="center" width="135" height="90" data-qtip="物料资料" alt="物料资料" onClick="" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img src="resources/images/guide/1.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" >',
                        '<img src="resources/images/guide/2.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" >',
                        '<img src="resources/images/guide/3.png" style="margin: -20px 0px 0 0;" align ="center" width="32" height="32" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<span  style="margin:0 270px 0px 0;" align ="center"  >基础设置</span>',
                        '<span  style="margin:0 270px 0px 0;" align ="center" >仓库资料</span>',
                        '<span  style="margin:0 0px 0px 0;" align ="center"  >物料资料</span>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img src="resources/images/guide/point.png" style="margin: 2px 0px 0 0;" align ="center" width="16" height="16" >',
                        "<br>",
                        '<div class="x-guide-line"  height="1"  style="border:1px solid #E4F7FF;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img src="resources/images/guide/customer.png" style="margin:50px 185px 0 0;" align ="center" width="135" height="90" data-qtip="客户资料" alt="客户资料" onClick="" >',
                        '<img src="resources/images/guide/vendor.png" style="margin:50px 185px 0 0;" align ="center" width="135" height="90" data-qtip="供应商资料" alt="供应商资料" onClick="" >',
                        '<img src="resources/images/guide/begin.png" style="margin:50px 0 0 0;" align ="center" width="135" height="90" data-qtip="开始使用" alt="开始使用" onClick="" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img src="resources/images/guide/4.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" >',
                        '<img src="resources/images/guide/5.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" >',
                        '<img src="resources/images/guide/6.png" style="margin: -20px 0px 0 0;" align ="center" width="32" height="32" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<span  style="margin:0 265px 100px 0;" align ="center"  >客户资料</span>',
                        '<span  style="margin:0 265px 100px 0;" align ="center" >供应商资料</span>',
                        '<span  style="margin:0 0px 100px 0;" align ="center"  >开始使用</span>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img src="resources/images/guide/point.png" style="margin: 2px 0px 0 0;" align ="center" width="16" height="16" >',
                        "<br>",
                        '<div class="x-guide-line"  height="1"  style="border:1px solid #E4F7FF;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                    '</div>',
				'</div>'
			),
			trackOver: true,
			overItemCls : 'x-module-over',
			selectedClass : 'selected',
			singleSelect : true,
			itemSelector : '.x-module-item'
		});
		
		Ext.apply(me,{
			items:[view]
		});
		me.view = view;
        me.callParent(arguments);
    },

    refresh:function(){
        this.ownerCt.setTitle('新手指引')
    }

});