common_005.js

一个自娱自乐的demo 开发环境 apache-tomcat-6.0.16 Mysql 5.1.11 Jdk 1.6 文件结构如下 --MyGame -----MyGam

Ext.onReady(function(){
    /* 全局过滤条件 */
    filterCondition = "";
    filterValue = "";
    
    parent.workDivInitFinish();
    
    Ext.QuickTips.init();
    
    /* create the Data Store */
    var store = new Ext.data.Store({
        id: 'store',
        proxy: new Ext.data.DWRProxy(Common_005_View_Dwr.getEmployeeListInfo_Action, true),
        reader: new Ext.data.DWRJsonReader({
            totalProperty: "totalProperty",
            root: "dataList"
        }, new Ext.data.Record.create([{
            name: 'empID',
            mapping: 'employeeID'
        }, {
            name: 'empName',
            mapping: 'employeeName'
        }, {
            name: 'age',
            mapping: 'employeeAge'
        }, {
            name: 'sex',
            mapping: 'employeeSex'
        }, {
            name: 'departmentName',
            mapping: 'departmentName'
        }, {
            name: 'jobName',
            mapping: 'jobName'
        }, {
            name: 'employmentStartDate',
            mapping: 'employmentStartDate'
        }, {
            name: 'employmentEndDate',
            type: 'string',
            mapping: 'employmentEndDate'
        }]))
    
    });
    
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({
        header: '序号',
        width: 32
    }),// 自动行号
    {
        id: 'empID',
        header: "员工编号",
        dataIndex: 'empID',
        width: 70
    }, {
        id: 'empName',
        header: "员工名称",
        dataIndex: 'empName',
        width: 70
    }, {
        id: 'age',
        header: "年龄",
        dataIndex: 'age',
        width: 40
    }, {
        id: 'sex',
        header: "性别",
        dataIndex: 'sex',
        width: 45
    }, {
        id: 'departmentName',
        header: "所属部门",
        dataIndex: 'departmentName',
        width: 90
    }, {
        id: 'jobName',
        header: "担任职位",
        dataIndex: 'jobName',
        width: 90
    }, {
        id: 'employmentStartDate',
        header: "合同开始日期",
        dataIndex: 'employmentStartDate',
        width: 105
    }, {
        id: 'employmentEndDate',
        header: "合同结束日期",
        dataIndex: 'employmentEndDate',
        width: 105
    }, {
        id: 'detailBtn',
        header: "详细信息",
        dataIndex: 'empID',
        width: 70,
        renderer: function(empID){
            return '<span><center><input type="button" class="inputTxt" value="详  细" onclick="showEmpDetail(\'' + empID + '\')"></center></span>';
        }
    }]);
    
    cm.defaultSortable = true;
    
    var grid = new Ext.grid.GridPanel({
        id: 'employeeInfoGrid',
        el: 'employeeInfoGrid',
        width: 740,
        height: 330,
        title: '员工信息列表',
        store: store,
        cm: cm,
        stripeRows: true,
        loadMask: true,
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: store,
            displayInfo: true
        })
    });
    
    grid.render();
    
    store.on('beforeload', function(){
        store.baseParams = {
            filterCondition: filterCondition,
            filterValue: filterValue
        };
    });
    
    store.load({
        params: {
            start: 0,
            limit: 20,
            arg: [filterCondition, filterValue]
        }
    });
    
    /* 日期输入框 */
    var filterDate = new Ext.form.DateField({
        id: 'filterDate',
        format: 'Y年m月d',
        maxValue: '9999/12/31',
        maxText: '超过最大期限',
        width: 120,
        fieldClass: 'date-Field'
    });
    
    filterDate.render('filterDateValueDiv');
});

/* 显示员工详细信息 */
function showEmpDetail(empID){
    parent.workDivInit();
    document.forms['empManageForm'].elements['empManageForm:employeeID'].value = empID;
    document.forms['empManageForm'].elements['empManageForm:showEmpDetailBtn'].click();
}

/* 过滤按钮点击 */
function onFilterAction(){
    filterCondition = document.forms['empManageForm'].elements['empManageForm:filterCondition'].value;
    
    if (filterCondition == '3') {// 显示男女条件选项
		filterValue = document.forms['empManageForm'].elements['empManageForm:filterValue'].value;

	} else if (filterCondition == '6' || filterCondition == '7') {// 显示日期输入框
		filterValue = Ext.getCmp('filterDate').getValue().Format("yyyyMMdd");

	} else {
		filterValue = document.forms['empManageForm'].elements['empManageForm:filterTxt'].value;
	}

	if (filterCondition != '999' && filterValue == '') {
		showInfoMessageBox_2('员工信息管理', '请输入要过滤的内容');
	} else {
        /* 查询时需要用到的参数 */
        var ds = Ext.getCmp('employeeInfoGrid').store;
        ds.on('beforeload', function(){
            ds.baseParams = {
                filterCondition: filterCondition,
                filterValue: filterValue
            };
        });
        ds.load({
            params: {
                start: 0,
                limit: 20
            }
        });
    }
}

/* 过滤项目变化时，相应的DIV显示 */
function filterConditionOnchange(){
    var filterCondition = document.forms['empManageForm'].elements['empManageForm:filterCondition'].value;
    
    if (filterCondition == '3') {//显示男女条件选项
		document.getElementById('filterValueDiv1').style.display = 'block';

		document.getElementById('filterValueDiv2').style.display = 'none';
		document.getElementById('filterValueDiv3').style.display = 'none';
	} else if (filterCondition == '6' || filterCondition == '7') {//显示日期输入框
		document.getElementById('filterValueDiv3').style.display = 'block';

		document.getElementById('filterValueDiv1').style.display = 'none';
		document.getElementById('filterValueDiv2').style.display = 'none';
	} else {
		document.getElementById('filterValueDiv2').style.display = 'block';

		document.getElementById('filterValueDiv1').style.display = 'none';
		document.getElementById('filterValueDiv3').style.display = 'none';
	}
}