天天看點

ExtJS表格示例

<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css"/> 

<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 

<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script> 

<script type="text/javascript" src="js/overLoad.js"></script> 

<script type="text/javascript" src="ext-3.1.0/ext-lang-zh_CN-min.js"></script>  

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ /> 

<meta http-equiv="Cache-Control" content="no-store"/> 

<meta http-equiv="Pragma" content="no-cache"/> 

<meta http-equiv="Expires" content="0"/> 

<!-- 是個政策 表示頁面加載完成後開始執行 --> 

<script type="text/javascript"> 

    Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif'; 

</script> 

<!--繼承了項目中要用到的所有外部檔案資訊--> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

    <head> 

        <title></title> 

        <STYLE TYPE="text/css"> 

            #content { 

                width: 100%; 

                height: 100%; 

            } 

            .add { 

                background-image: url(images/icon/add.gif) !important; 

            .update { 

                background-image: url(images/icon/update.gif) !important; 

            .delete { 

                background-image: url(images/icon/delete.gif) !important; 

            .assign {  

                background-image: url(images/icon/list-items.gif) !important;  

            .ux-combo-selectall{   

                padding:3px;   

            }   

            .ux-combo-selectall-icon-checked{   

                background: transparent url(ext-3.1.0/resources/images/default/menu/checked.gif);   

            .ux-combo-selectall-icon-unchecked {     

                background: transparent url(ext-3.1.0/resources/images/default/menu/unchecked.gif);     

            .ux-combo-selectall-icon {   

                text-indent:1.8em;   

                background-position: 3px 2px ! important;     

                background-repeat:no-repeat ! important;     

                height:22px;   

                line-height:20px;   

                font-size:12px;   

                font-weight:bold;   

                -moz-user-select:none;   

            .ux-lovcombo-icon { 

            width:16px; 

            height:16px; 

            float:left; 

            background-position: -1px -1px ! important; 

            background-repeat:no-repeat ! important; 

            .ux-lovcombo-icon-checked { 

            background: transparent url(ext-3.1.0/resources/images/default/menu/checked.gif);  

            .ux-lovcombo-icon-unchecked { 

            background: transparent url(ext-3.1.0/resources/images/default/menu/unchecked.gif); 

            /* IE patch */ 

            .ext-ie .ux-lovcombo-item-text { 

            position:absolute; 

            left:16px; 

            top:3px; 

            .ext-ie .ux-lovcombo-icon { 

            float:none; 

            .ext-ie .x-combo-list-item { 

            position:relative; 

            }    

        </STYLE> 

        <script type="text/javascript" src="js/Ext.ux.form.LovCombo.js"></script> 

        <script type="text/javascript"><!-- 

            var grid; 

            var menuForm; 

            var win; 

            var appPvWin; 

            var columnPvWin; 

            var appPvStore; 

            Ext.onReady(function(){ 

                Ext.QuickTips.init(); 

                Ext.form.Field.prototype.msgTarget = 'qtip';//統一指定錯誤資訊提示方式 

                var menuRecord=Ext.data.Record.create([ 

                                                    {name:'nt'}, 

                                                    {name:'yc'}, 

                                                    {name:'sq'}, 

                                                    {name:'cz'}, 

                                                    {name:'xz'}, 

                                                    {name:'yz'}, 

                                                    {name:'lyg'}, 

                                                    {name:'ha'}, 

                                                    {name:'wx'}, 

                                                    {name:'tz'}, 

                                                    {name:'nj'}, 

                                                    {name:'zj'}, 

                                                    {name:'sz'} 

                                                ]); 

                var creader = new Ext.data.JsonReader({ root : "date"}, menuRecord); 

                var store = new Ext.data.Store({ 

                    //autoLoad : {params : {start : 0,limit : 15}},//自動加載 

                    autoLoad : false, 

                    reader :creader , 

                    proxy : new Ext.data.HttpProxy({//獲得交給DataReader解析的資料 

                        url : 'statistiweb.sp?method=getInstallSiteByArea', 

                        method : 'POST' 

                    }) 

                }); 

                //表格grid的列 

                var cm = new Ext.grid.ColumnModel([ 

                    new Ext.grid.CheckboxSelectionModel(),  

                    { header : '南京',dataIndex: 'nj', sortable:false}, 

                    { header : '蘇州',dataIndex: 'sz', sortable:false}, 

                    { header : '無錫',dataIndex: 'wx', sortable:false }, 

                    { header : '常州',dataIndex: 'cz', sortable:false }, 

                    { header : '鎮江',dataIndex: 'zj', sortable:false }, 

                    { header : '揚州',dataIndex: 'yz', sortable:false}, 

                    { header : '南通',dataIndex: 'nt', sortable:false}, 

                    { header : '泰州',dataIndex: 'tz', sortable :false}, 

                    { header : '徐州',dataIndex: 'xz', sortable:false }, 

                    { header : '淮安',dataIndex: 'ha', sortable:false}, 

                    { header : '鹽城',dataIndex: 'yc', sortable:false}, 

                    { header : '連雲港',dataIndex: 'lyg', sortable:false}, 

                    { header : '宿遷',dataIndex: 'sq', sortable:false} 

                ]); 

                //表格面闆 

                grid = new Ext.grid.GridPanel({ 

                    region : 'center', 

                    margins: '3 3 3 3', 

                    autoWidth:true, 

                    frame : false, 

                    store : store, 

                    minColumnWidth : 100,   //設定每列最小寬度 

                    cm : cm,                //設定列 

                    sm : new Ext.grid.RowSelectionModel({ singleSelect : true }), 

                    viewConfig : { autoFit : true }, 

                    width : Ext.get("content").getWidth(), 

                    height : Ext.get("content").getHeight(), 

                    loadMask : {msg : '正在加載資料,請稍侯……'} 

                var panel = new Ext.Panel({ 

                    title : '各地市裝機量', 

                    layout : 'border', 

                    border : true, 

                    applyTo : 'panel-div', 

                    items : [grid], 

                    buttons:[new Ext.Button({ 

                                text : '查詢', 

                                handler : query 

                            })] 

                    //items : [form,grid] 

            function query() { 

                grid.getStore().reload({params : { 

                                                 //startDate : startDate, 

                                                 //endDate : endDate 

                                            }}); 

            });// End of Ext.onReady 

    --></script> 

    </head> 

    <body> 

        <div id="content"> 

            <div id='panel-div'></div> 

        </div> 

    </body> 

</html> 

<a href="http://blog.51cto.com/attachment/201304/231856107.jpg" target="_blank"></a>

背景:

/**計算裝機量(分地市)**/ 

//http://localhost:8080/smartjsmgr/statistiweb.sp?method=getInstallSiteByArea 

@RequestMapping(params = "method=getInstallSiteByArea", method = RequestMethod.POST) 

public ModelAndView getInstallSiteByArea(HttpServletRequest request,HttpServletResponse response){ 

    Map&lt;String,Object&gt; map = new HashMap&lt;String,Object&gt;(); 

    List&lt;Statistiweb&gt; list=new ArrayList&lt;Statistiweb&gt;(); 

    try { 

        list=statistiwebService.getInstallSiteByArea(); 

        if (list.size()&gt;0) { 

            map.put("date", list); 

            map.put("success", "true"); 

        }else{ 

            map.put("success", "false"); 

        } 

    } catch (Exception e) { 

        // TODO: handle exception 

        e.printStackTrace(); 

        logger.error("查詢計算裝機量(分地市)失敗!!!"); 

    } 

    return new ModelAndView("jsonView",map); 

本文轉自 夢朝思夕 51CTO部落格,原文連結:http://blog.51cto.com/qiangmzsx/1175064

繼續閱讀