ext sample

 //加载所有的数据
var alarmInfoDs = new Ext.data.Store({
  proxy : new Ext.data.HttpProxy({url : 'alarmInfo!toAlarmInfoList.action'}),
  reader : new Ext.data.JsonReader({
                totalProperty : 'total',
                root : 'root'
              }, [{name : 'vehicleNo',type : 'string'},
                {name : 'alarmType',type : 'string'},
                {name : 'alarmSpeed',type : 'int'},
                {name : 'alarmDirection',type : 'int'},
                {name : 'vehicleDriver',type : 'string'},
                {name : 'alarmTime',type : 'string'},
                {name : 'alarmLngLat',type : 'string'},
                {name : 'alarmPosition',type : 'string'},
                {name : 'alarmId',type : 'int'},
                {name : 'alarmAccStatus',type : 'int'},
                {name : 'alarmCancel',type : 'int'}
                 ])
});
 var searchalarmInfo = function(){
    alarmInfoDs.load({params : {start : 0,limit : 10}});
};
var alarmReportWin = new Ext.Window({
    title: '报警记录报表',
    modal:true,
    layout:'fit',
    width:900,
    height: 550,
    closeAction:'hide',
    resizable : false,
    plain: true,
    closable : true,
    items: new Ext.grid.GridPanel({
        store: alarmInfoDs,
        hideParent:true,
        stripeRows: true,
        stateful: true,
        tbar:['起始时间：',{
            xtype:'datetimefield',
            emptyText:'请选择日期',
            editable:false,
            format:"Y-m-d H:i",
            width:130
        },'-','结束时间：',{
            xtype:'datetimefield',
            emptyText:'请选择日期',
            format:"Y-m-d H:i",
            width:130
        },'-','报警类型：',{
            xtype:'combo',
            width:100,
            editable: true,
            store: alarmTypeStore,
            displayField:'alarmType',
            valueField: 'alarmType',
            emptyText:'报警类型',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            selectOnFocus:true
        },'-','车牌号码：',{
            xtype:'combo',
            width:100,
            editable: true,
            store: carStore,
            displayField:'carNum',
            valueField: 'carNum',
            emptyText:'车牌号码',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            selectOnFocus:true
        },'-',{
            text:'查询',
            iconCls: 'icon-search'
        },'-',{
            text:'导出',
            iconCls: 'icon-excel',
            handler: function() {
                Ext.Ajax.request({
                    url : 'alarmInfo!expAlarmInfoToXls.action',
                    scope : this
                });
            }
        }],
        columns: [
            {header: '车牌号码', width: 100, sortable: true, dataIndex: 'vehicleNo'},
            {header: '报警类型', width: 80, sortable: true, dataIndex: 'alarmType'},
            {header: '速度', width: 60, sortable: true, dataIndex: 'alarmSpeed'},
            {header: '方向', width: 60, sortable: true, dataIndex: 'alarmDirection'},
            {header: '司机', width: 60, sortable: true, dataIndex: 'vehicleDriver'},
            {header: '报警时间', width: 130, sortable: true, dataIndex: 'alarmTime'},
            {header: '经纬度', width: 150, sortable: true, dataIndex: 'alarmLngLat'},
            {header: '地址', width: 250, sortable: true, dataIndex: 'alarmPosition'},
            {header: '主键', width: 130, sortable: true, dataIndex: 'alarmId',hidden:true},
            {header: '报警时开关状态', width: 150, sortable: true, dataIndex: 'alarmAccStatus',hidden:true},
            {header: '是否取消报警', width: 250, sortable: true, dataIndex: 'alarmCancel',hidden:true}
        ],
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: alarmInfoDs,
            displayInfo: true,
            displayMsg: '显示{0} 到 {1} 条记录，共{2} 条记录',
            emptyMsg: "没有记录"
        })
    })
});


//Function