js

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setConfig({disableCaching: false});
Ext.Loader.setPath('Ext.ux', window.WEBROOT + '/ext4/ux');
Ext.require([
     'Ext.window.*'
     ,'Ext.tab.*'
     ,'Ext.toolbar.Toolbar'
     ,'Ext.form.*'
     ,'Ext.slider.*'
     ,'Ext.panel.Panel'
     ,'Ext.ux.form.ItemSelector'
]);

var ds = Ext.create('Ext.data.ArrayStore', {
    data: [[123,'One Hundred Twenty Three'],
        ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
        ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
    fields: ['value','text'],
    sortInfo: {
        field: 'value',
        direction: 'ASC'
    }
});

Ext.onReady(function () {
	Ext.QuickTips.init();
	init();
});

function init(){	
	window.mainWindow = Ext.create('Ext.Window', {
        title: '配置',
        width: 520,
        height: 440,
        x:10,
        y:20,
        plain: true,
        headerPosition: 'top',
        layout: 'fit'
		,tools:[
		    {type:'refresh',tooltip: 'Refresh form Data',handler: function(event, toolEl, panel){
		    	refresh();
		    }},
		    {type:'help',tooltip: 'Get Help',handler: function(event, toolEl, panel){}}
		]
		,iconCls:'icon_config'
		,bodyStyle :'border-width : 0px'
    });
	
	var tabpanel = Ext.create('Ext.TabPanel',{
		resizeTabs: true,
        enableTabScroll: true,
        defaults: {
            autoScroll:true
            ,layout:'fit'
        },
  		items:[
			createForm()
			,{title: '统计字段值',html: 'content'}
			,{title: '多字段值相同',html: 'content'}
			,{title: '匹配关键字',html: 'content'}
			,{title: '编码模式',html: 'content'}
  		]
  		,plain: false
  		,bodyStyle :'border-width : 0px'
	});
	
	var toolbar = Ext.create('Ext.toolbar.Toolbar',{
		items:[
			{text:'启动',iconCls:'icon_server_started'}
			,'-',
			{text:'停止',iconCls:'icon_server_stopped',disabled: true}
		]
		,dock:'top'
	});
	
	mainWindow.add(tabpanel);
	mainWindow.addDocked(toolbar);
	mainWindow.show();
	
	window.onunload = function(){
		try {
			Ext.destroy(mainWindow);
		} catch (e) {
			alert('回收资源异常!' +e);
		}
	};
}

function createForm(){
	var form = Ext.create('Ext.form.Panel',{
		bodyPadding: 5
		,frame: false
		,bodyStyle :'border-width : 1px; border-radius: 4px'
		,fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 60,
            anchor: '100%'
        }
		,items:[
			 {
	            xtype: 'textareafield',
	            name: 'discription',
	            fieldLabel: '说明'
	            ,grow:false
	            ,emptyText :'请输入说明'
	            ,maxLength :50
	            ,height:50
	        }
	        ,{
	        	layout:'column'
	        	,baseCls : 'noBorder'
	        	,defaults: {
	        	}
	        	,items:[
	        		{
	        			columnWidth:0.9,
			        	xtype:'sliderfield',
			        	fieldLabel:'百分比',
			        	hideLabel: false,
				        minValue: 1,
				        maxValue: 100
				    },{
	        			columnWidth:0.1
	        			,xtype:'label'
	        			,text:'1%'
	        		}
	        	]
	        }
		    ,{
		    	xtype:'tabpanel'
		    	,plain: true
		    	,tabPosition: 'top'
		    	,activeTab: 0
		    	,layout:'fit'
		    	,defaults: {
		            autoScroll:true
		            ,layout:'fit'
		            //,html:'中华人民共和国中华人民共和国中华人民共和国'
		        }
		    	,items:[
		    		{
		    			title:'销售字段'
		    			,bodyStyle:'border-width : 0px'
		    			,items:[{
				            xtype: 'itemselector',
				            name: 'itemselector',
				            anchor: '100%',
				            store: store,
				            displayField: 'name',
				            valueField: 'fieldCode',
				            value: ['3', '4', '6'],
				
				            allowBlank: true,
				            // minSelections: 2,
				            // maxSelections: 3,
				            msgTarget: 'side'
				            
				            ,multiselects:[
				            	{
				            		listTitle :'未选的字段'
				            		,bodyStyle:'border-width : 0px'
				            		,boundListCls:'noLeftAndBottom'
				            		,headerCls:'noTopAndLeft'
				            	}
				            	,{
				            		listTitle :'已选的字段'
				            		,bodyStyle:'border-width : 0px'
				            		,boundListCls:'noRightAndBottom'
				            		,headerCls:'noTopAndRight'
				            	}
				            ]
				        }]
		    		}
		    		,{title:'采购字段'}
		    		,{title:'库存字段'}
		    	]
		    }
		]
	});
	
	var panel = Ext.create('Ext.panel.Panel',{
		title: '必填字段'
		,items:[form]
		,frame:true
		,layout:'fit'
		,bodyStyle :'border-width : 0px; '
		//,baseCls: 'noBorder'
		,buttons: [{
            text: '应用',
            iconCls:'icon_save',
            width:5,
            handler: function(){
               
            }
        }]
	});
	
	return panel;
}