小搭ext4.0粗糙框架

 现在不搞web了，记录一下历史的汗水

Ext.onReady(function(){
	var isAdd = true;
    var tree = Ext.create('Ext.tree.Panel', {
        //        title: '复选框示例',
		height:'100%',
        border: false,
        root: {
            text: '树根',
            expanded: true,
            children: [{
                text: '员工管理',
                checked: true,
                leaf: true
            }, {
                text: '财务管理',
                checked: false,
//                 expanded: true,
            //  leaf: true
                children: [{
                    text: "日常管理",
					checked : false,
                    leaf: true
                }, {
                    text: "薪酬管理",
					checked : false,
                    leaf: true
                }]
            }]
        }
    });
	Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'sex'},
            {name: 'age'},
            {name: 'entryDate'},
            {name: 'salary'},
            {name: 'desc'}
         ]
    });
	 // Array data for the grids
    empData = [
		['001','张三', '男', 26, '2010-01-22', 5000,'ddddddddd'],
		['001','李四', '女', 26, '2010-01-22', 6000,'ddddddddd'],
		['001','王五', '男', 23, '2010-01-22', 3000,'ddddddddd'],
		['001','赵六', '男', 34, '2010-01-22', 5000,'ddddddddd'],
		['001','田七', '女', 45, '2010-01-22', 6000,'ddddddddd'],
		['001','刘八', '男', 52, '2010-01-22', 4300,'ddddddddd'],
		['001','杨九', '女', 21, '2010-01-22', 5400,'ddddddddd'],
		['001','陈十', '男', 32, '2010-01-22', 5200,'ddddddddd'],
		['001','张三', '男', 26, '2010-01-22', 5000,'ddddddddd'],
		['001','李四', '女', 26, '2010-01-22', 6000,'ddddddddd'],
		['001','王五', '男', 23, '2010-01-22', 3000,'ddddddddd'],
		['001','赵六', '男', 34, '2010-01-22', 5000,'ddddddddd'],
		['001','田七', '女', 45, '2010-01-22', 6000,'ddddddddd'],
		['001','刘八', '男', 52, '2010-01-22', 4300,'ddddddddd'],
		['001','杨九', '女', 21, '2010-01-22', 5400,'ddddddddd'],
		['001','陈十', '男', 32, '2010-01-22', 5200,'ddddddddd']
    ];
	 var empStore = Ext.create('Ext.data.ArrayStore', {
            model: 'Employee',
            data: empData
        });
    
	 var grid4 = Ext.create('Ext.grid.Panel', {
        id:'button-grid',
        store: empStore,
	
        columns: [
//		    Ext.create('Ext.grid.RowNumberer'),  //行号
            {text: "编号",  sortable: true, dataIndex: 'id'},
            {text: "姓名", width: 120, sortable: true,  dataIndex: 'name'}, //renderer: Ext.util.Format.usMoney,
            {text: "性别", width: 120, sortable: true, dataIndex: 'sex'},
            {text: "年龄", width: 120, sortable: true, dataIndex: 'age'},
            {text: "入职日期", width: 120, sortable: true, dataIndex: 'entryDate'},
			{text: "薪水", width: 120, sortable: true, dataIndex: 'salary',renderer:function(value,row){return value+".00"}},
			{text: "员工简介", flex:1, sortable: true, dataIndex: 'desc'}
        ],
        columnLines: true,
//		height:'100%',
//		width:'100%',
        selModel: Ext.create('Ext.selection.CheckboxModel', {
//        listeners: {
//            selectionchange: function(sm, selections) {
//                grid4.down('#delete').setDisabled(selections.length == 0);
//            }
//          }
    	}),
//
//        // inline buttons
        dockedItems: [
//        {
//            xtype: 'toolbar',
//            dock: 'bottom',
//            ui: 'footer',
//            layout: {
//                pack: 'center'
//            },
//            items: [{
//                minWidth: 80,
//                text: 'Save'
//            },{
//                minWidth: 80,
//                text: 'Cancel'
//            }]
//        },
        {
            xtype: 'toolbar',
            items: [{
                text:'增加',
                icon:'../icon/add.png',
                tooltip:'Add a new row',
                iconCls:'add',
				handler:function(){
					isAdd = true;
					addWin.show();
				}
            }, '-', {
                text:'修改',
                icon:'../icon/cog_edit.png',
                tooltip:'Set options',
                iconCls:'option',
				handler:function(){
					var rows = grid4.getSelectionModel().getSelection();
					if(rows.length == 0){
						Ext.MessageBox.alert("警告", "请选择一条记录");
					} else if(rows.length > 1){
						Ext.MessageBox.alert("警告", "只能选择一条记录进行编辑");
					} else {
						isAdd = false;
						empForm.loadRecord(rows[0]);
						addWin.show();
					}
				}
            },'-',{
                itemId: 'delete',
                icon:'../icon/delete.gif',
                text:'删除',
                tooltip:'Remove the selected item',
                iconCls:'remove',
//                disabled: true,
				handler:function(){
					var rows = grid4.getSelectionModel().getSelection();
	 				if (rows.length == 0) {
						Ext.MessageBox.alert("警告", "请选择一行数据进行删除");
					}
					else {
						Ext.MessageBox.confirm("提示框", "是否确定要进行删除!", function(btn){
							if (btn == "yes") {
								//							var ids = rows[0].id;
								//							for(var i = 1; i < rows.length; i++) {
								//								ids = ids + "," + rows[i].id;
								//							}
								//							Ext.Ajax.request({
								//								url:"deleteUser.action",//请求地址
								//								params:{id:ids},
								//								success:function(result){
								//									var jsonStr = Ext.util.JSON.decode(result.responseText)
								//									Ext.MessageBox.alert("成功",jsonStr.msg);
								//								},
								//								failure:function(result){
								//									var jsonStr = Ext.util.JSON.decode(result.responseText)
								//									Ext.MessageBox.alert("失败",jsonStr.msg);
								//								}
								//							});
								//							
								//							//进行删除操作
								//							for(var i = 0; i < rows.length; i++) {
								//								store.remove(rows[i]);
								//							}
								var sm = grid4.getSelectionModel();
								
								empStore.remove(sm.getSelection());
								
								Ext.MessageBox.alert("提示", "删除成功");
								;
							//							empStore.reload();
							}
						});
					}
				}
				
            }]
        }],

        frame: true,
        title: '员工管理',
        iconCls: 'icon-grid'
//        renderTo: Ext.getBody()
    });
    
   var tabpanel =   Ext.create('Ext.tab.Panel', { 
//	   	authWidth:true,
//	    authHeight:true,
	    activeTab: 0, 
	    items: [ 
	        { 
	            title: 'Tab 1', 
//	            bodyPadding: 10, 
	            closable:true,
	            height:'100%',
	            layout:'fit',
				items:grid4	           
	        }, 
	        { 
	            title: 'Tab 2', 
	            html : 'changxian' 
	        } 
	    ]
//	    renderTo : Ext.getBody() 
	});  
     Ext.create('Ext.container.Viewport', {
        layout: 'border',//表格布局
        items: [{
//            title: 'north Panel',
//        	html:"<br><center><font size = 6>XXXX应用系统</font></center>",
            html: '<p align="center"><font size="44">XXXX应用系统<font><p>',
            region: 'north',//指定子面板所在区域为north
            collapsible: true,
            split: true,
            height: 100
        }, {
            title: '菜单树',
            //            html: '左边',
            region: 'west',//指定子面板所在区域为west
            width: 220,
            collapsible: true,
            split: true,
            frame:true,
            items: tree
        }, {
//            title: '主区域',
            region: 'center',//指定子面板所在区域为center
            width:'100%',
			layout:'fit',
            items:tabpanel
        }]
    });
    
    var empForm = new Ext.form.Panel({
		fieldDefaults:{
			labelSeparator:":",
			labelWidth:80,
			msgTarget:'side',
			width:300
		},
		bodyPadding:5,
		frame:true,
		items:[{
			xtype:'textfield',
			allowBlank:false,
			blankText:'编号不能为空',
			name:'id',
			fieldLabel:'员工编号'
		},{
			xtype:'textfield',
			allowBlank:false,
			blankText:'员工姓名不能为空',
			name:'name',
			fieldLabel:'员工姓名'			
		},{
			xtype:'radiogroup',
			fieldLabel:'性别',
			items:[{boxLabel: '男', name: 'sex', inputValue: '男', checked: true},
                   {boxLabel: '女', name: 'sex', inputValue: '女'}]
		},{
			xtype:'numberfield',
			fieldLabel:'年龄',
			name:'age',
			value: 30,
            minValue: 18
		},{
			xtype:'datefield',
			name:'entryDate',
			fieldLabel:'入职日期',
			format:'Y-m-d'
		},{
			xtype:'numberfield',
			fieldLabel:'薪水',
			minValue: 3000,
			allowDecimals:true,
			decimalPrecision:2,
			name:'salary'
		},{
			xtype:'textarea',
			fieldLabel:'员工简介'	,
			name:'desc'
		}],
		buttons:[{
			text: "保存",
			handler:function(){
				if (empForm.getForm().isValid()) {
					var params = empForm.getForm().getValues();
					var r = Ext.ModelManager.create(params, 'Employee');
//					alert(isAdd);
					addWin.close();
					if(isAdd){
						empStore.insert(0, r);
					} else {
						var record = grid4.getSelectionModel().getSelection()[0];
						record.set('id',r.get('id'));
						record.set('name',r.get('name'));
						record.set('sex',r.get('sex'));
						record.set('age',r.get('age'));
						record.set('entryDate',r.get('entryDate'));
						record.set('salary',r.get('salary'));
						record.set('desc',r.get('desc'));
//						empStore.findRecord(rows[0])=r;
//						alert('ddd');
//						rows[0] = r;
					}
					empForm.getForm().reset();
				} else {
//					return;
					Ext.MessageBox.alert('提示','请填入正确信息');
				}
			}
		},{
			text: "重置",handler:function(){
				empForm.getForm().reset();
			}
		}]
	})
   var addWin = new Ext.window.Window({
   		layout:'fit',
		width:380,
		closeAction:'hide',
		height:300,
		resizable:false,
		shadow:true,
		modal:true,
		closable:true,
		items:empForm
   })
  
})