2. 程式人生 > >ExtJS4學習筆記(七)---帶搜尋的Grid（SearchGrid）

ExtJS4學習筆記(七)---帶搜尋的Grid（SearchGrid）

阿新 • • 發佈：2019-01-27

專案開發中，Grid元件少不了搜尋功能，在Extjs4中，搜尋元件以外掛的形式出現，而且實現也非常簡單，搜尋元件位於examples/ux/form目錄下，JS檔案是SearchField.js。

Grid載入搜尋功能，要注意的是：

1、開啟延遲載入，即Ext.Loader.setConfig({enabled: true});

2、設定外掛的目錄：Ext.Loader.setPath('Ext.ux', '../../examples/ux'); ，需要注意，外掛所在目錄一定要正確，否則載入失敗，就實現不了所要功能了。

效果圖：


初始載入


輸入查詢條件後

HTML程式碼：

  1. <!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>SearchGrid-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css"
     href="../../resources/css/ext-all.css" />
  7. <style type="text/css">
  8.         #search-results a {
  9.             color: #385F95;
  10.             font:bold 11px tahoma, arial, helvetica, sans-serif;
  11.             text-decoration:none;
  12.         }
  13.         #search-results a:hover {
  14.             text-decoration:underline;
  15.         }
  16.         #search-results p {
  17.             margin:3px !important;
  18.         }
  19.         .search-item {
  20.             font:normal 11px tahoma, arial, helvetica, sans-serif;
  21.             padding:3px 10px 3px 10px;
  22.             border:1px solid #fff;
  23.             border-bottom:1px solid #eeeeee;
  24.             white-space:normal;
  25.             color:#555;
  26.         }
  27.         .search-item h3 {
  28.             display:block;
  29.             font:inherit;
  30.             font-weight:bold;
  31.             color:#222;
  32.         }
  33.         .search-item h3 span {
  34.             float: right;
  35.             font-weight:normal;
  36.             margin:0 0 5px 5px;
  37.             width:100px;
  38.             display:block;
  39.             clear:none;
  40.         }
  41.         /*這裡要注意這兩張圖片的路徑要正確*/
  42.         .x-form-clear-trigger {
  43.             background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
  44.         }
  45.         .x-form-search-trigger {
  46.             background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
  47.         }
  48.     </style>
  49. <script type="text/javascript" src="../../bootstrap.js"></script>
  50. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  51. <script type="text/javascript" src="searchgrid.js"></script>
  52. </head>
  53. <body>
  54. <div id="demo"></div>
  55. </body>
  56. </html>

SearchGrid.js：

  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux', '../../examples/ux');
  3. Ext.require([
  4. 'Ext.grid.*',
  5. 'Ext.toolbar.Paging',
  6. 'Ext.util.*',
  7. 'Ext.data.*',
  8. 'Ext.ux.form.SearchField'
  9. ]);
  10. Ext.onReady(function(){
  11.     Ext.define('MyData',{
  12.         extend: 'Ext.data.Model',
  13.         fields: [
  14. 'title','author',
  15. //第一個欄位需要指定mapping，其他欄位，可以省略掉。
  16.             {name:'hits',type: 'int'},
  17. 'addtime'
  18.         ]
  19.     });
  20. //建立資料來源
  21. var store = Ext.create('Ext.data.Store', {
  22. //分頁大小
  23.         pageSize: 50,
  24.         model: 'MyData',
  25. //是否在服務端排序
  26.         remoteSort: true,
  27.         proxy: {
  28. //非同步獲取資料，這裡的URL可以改為任何動態頁面，只要返回JSON資料即可
  29.             type: 'ajax',
  30.             url: 'searchgrid.asp',
  31.             reader: {
  32.                 root: 'items',
  33.                 totalProperty  : 'total'
  34.             },
  35.             simpleSortMode: true
  36.         },
  37.         sorters: [{
  38. //排序欄位。
  39.             property: 'hits',
  40. //排序型別，預設為 ASC
  41.             direction: 'DESC'
  42.         }]
  43.     });
  44. //建立Grid
  45. var grid = Ext.create('Ext.grid.Panel',{
  46.         store: store,
  47.         columnLines: true,
  48.         columns: [
  49.                 {text: "標題", width: 120, dataIndex: 'title', sortable: true},
  50.                 {text: "作者", width: 140, dataIndex: 'author', sortable: false},
  51.                 {text: "點選數", width: 100, dataIndex: 'hits', sortable: true},
  52.             {text: "新增時間", width: 150, dataIndex: 'addtime', sortable: true}
  53.         ],
  54.         height:400,
  55.         width:520,
  56.         x:20,
  57.         y:40,
  58.         title: 'ExtJS4 SearchGrid-Grid 搜尋',
  59.         disableSelection: true,
  60.         loadMask: true,
  61.         renderTo: 'demo',
  62.         viewConfig: {
  63.             id: 'gv',
  64.             trackOver: false,
  65.             stripeRows: false
  66.         },
  67.         dockedItems: [{
  68.             dock: 'top',
  69.             xtype: 'toolbar',
  70.             items: {
  71.                 width: 300,
  72.                 fieldLabel: '搜尋',
  73.                 labelWidth: 50,
  74.                 xtype: 'searchfield',
  75.                 store: store
  76.             }
  77.         }, {
  78.             dock: 'bottom',
  79.             xtype: 'pagingtoolbar',
  80.             store: store,
  81.             pageSize: 25,
  82.             displayInfo: true,
  83.             displayMsg: '顯示 {0} - {1} 條，共計 {2} 條',
  84.             emptyMsg: '沒有資料'
  85.         }]
  86.     })
  87.     store.loadPage(1);
  88. })

程式碼完成了Grid元件非同步載入資訊、分頁和搜尋功能，可以滿足一般使用情況了。

服務端程式碼，由於使用測試資料，這裡只使用了最簡單的方法來實現搜尋效果，實際操作中，需要將查詢條件置於SQL語句中，達到搜尋效果。

SearchGrid.asp：

  1. <%
  2.     Response.ContentType = "text/html"
  3.     Response.Charset = "UTF-8"
  4. %>
  5. <%
  6. '返回JSON資料,自定義一些測試資料。。
  7. '這裡的引數與EXT3.x相同，區別在於排序欄位和排序方式使用了新的屬性。
  8. '由於這裡是測試資料，接收的引數只用到了start,limit。sorts和dir在實際操作過程中，將之加入SQL的ORDER BY裡即可。
  9. start = Request("start")
  10. limit = Request("limit")
  11. '查詢時獲取的引數。
  12. query = Request("query")
  13. If start = ""Then
  14.     start = 0
  15. EndIf
  16. If limit = ""Then
  17.     limit = 50
  18. EndIf
  19. sorts = Replace(Trim(Request.Form("sort")),"'","") 
  20. dir = Replace(Trim(Request.Form("dir")),"'","")
  21. '測試資料，這裡直接輸出結果，實際應用中，應該把查詢條件放到SQL語句中。
  22. If query = "newstitle"Then
  23.     Echo("{")
  24.     Echo("""total"":")
  25.     Echo("""1")
  26.     Echo(""",""items"":[")
  27.     Echo("{")
  28.     Echo("""title"":""newstitle""")
  29.     Echo(",")
  30.     Echo("""author"":""author""")
  31.     Echo(",")
  32.     Echo("""hits"":""100""")
  33.     Echo(",")
  34.     Echo("""addtime"":"""&Now()&"""")
  35.     Echo("}")
  36.     Echo("]}")
  37. Else
  38. Dim counts:counts=300
  39. '注意，這裡的counts相當於Rs.RecordCount,也就是記錄總數。
  40. Dim Ls:Ls = Cint(start) + Cint(limit)
  41. If Ls >= counts Then
  42.    Ls = counts
  43. EndIf
  44. Echo("{")
  45. Echo("""total"":")
  46. Echo(""""&counts&""",")
  47. Echo("""items"":[")
  48. For i = start+1 To Ls
  49.    Echo("{")
  50.    Echo("""title"":""newstitle"&i&"""")
  51.    Echo(",")
  52.    Echo("""author"":""author"&i&"""")
  53.    Echo(",")
  54.    Echo("""hits"":"""&i&"""")
  55.    Echo(",")
  56.    Echo("""addtime"":"""&Now()&"""")
  57.    Echo("}")
  58. If i<Ls Then
  59.      Echo(",")
  60. EndIf
  61. Next
  62. Echo("]}")
  63. EndIf
  64. Function Echo(str)
  65.    Response.Write(str)
  66. EndFunction
  67. %>

至此，帶搜尋功能的Grid就全部完成了。

相關推薦

ExtJS4學習筆記(七)---帶搜尋的Grid（SearchGrid）

專案開發中，Grid元件少不了搜尋功能，在Extjs4中，搜尋元件以外掛的形式出現，而且實現也非常簡單，搜尋元件位於examples/ux/form目錄下，JS檔案是SearchField.js。 Grid載入搜尋功能，要注意的是： 1、開啟延遲載入，即Ext.Loader.setConfig({enabl

七LWIP學習筆記之傳輸控制協議（TCP）

輸入 post wait syn 快速重傳 擁塞 斷開連接 其他 time 一、協議簡介 1、TCP的必要性 2、TCP的特性 3、連接的定義 4、數據流編號 5、滑動窗口 二、TCP報文 1、報文格式 2、TCP選項 3、緊急數據 4、強迫數據交互 5、報文首部數據結構

《機器學習實戰》學習筆記七：Logistics迴歸（梯度上升法）

1 Logistics迴歸概念 迴歸是指將一對資料擬合為一條直線的過程，而Logistics迴歸則是將回歸用於分類，其主要思想為：根據現有的資料對分類邊界線建立迴歸公式，依次為依據進行分類，在這裡最關鍵的一步是尋找最佳的擬合引數，這一步將會用到一些最優化的方法

java 學習筆記2 面向對象（上）

awr ges abs nal mage 有效 面向對象 ima col 類和對象 類是某一批對象的抽象，可以把類理解成某種概念。對象是一個具體存在的實體。類和對象是面向對象的核心。 類定義的是多個實例的特征，類不是具體存在，實例才是具體存在。 定義類(class)的語法：

Java基礎學習筆記十六 集合框架（二）

first 哈希 cat etag 基於 col 容器 處的 新元素 List List接口的特點: 它是一個元素存取有序的集合。例如，存元素的順序是11、22、33。那麽集合中，元素的存儲就是按照11、22、33的順序完成的。 它是一個帶有索引的集合，通過索引就

C#.Net 設計模式學習筆記之創建型 （一）

應用 種類 單件 src nag abstract 子類 指定 相關 1、抽象工廠（Abstract Factory）模式 常規的對象創建方法： //創建一個Road對象 Road road =new Road(); new 的問題： 實現依賴，不能應對“具

python學習筆記列表和元組（三）

python列表（list）是Python以及其他語言中最常用到的數據結構之一。Python使用使用中括號 [ ] 來解析列表。列表是可變的（mutable）——可以改變列表的內容。對應操作：1、查（[]切片操作） name = [‘tom‘,‘張三‘,‘joker‘,‘李四‘] print(name[2])

HTML學習筆記基礎表格 第二節 （原創）

utf 空心圓 無序列表 har ble 學習 oot order 有序 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title

JAVAscript學習筆記 js事件 第一節 （原創） 參考js使用表

onchange onf form 看不見 鼠標 hello cnblogs html 加載 <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta ch

JAVAscript學習筆記 js異常 第二節 （原創） 參考js使用表

htm demo cnblogs value demo1 span 自定義 char 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

EEPROM讀寫學習筆記與I2C總線（二）

一點 後來 並不是 完數 cal 效應 計算 spi 速度慢 無論任何電子產品都會涉及到數據的產生與數據的保存，這個數據可能並不是用來長久保存，只是在運行程序才會用到，有些數據體量較大對於獲取時效性並不太強，各種各樣的數據也就有不同的存儲載體，這次在EEPR

【安全牛學習筆記】手動漏洞挖掘（二）

security+ 漏洞 信息安全 手動漏洞挖掘身份認證 常用弱口令/基於字典的密碼破爆破 鎖定賬號 信息收集 手機號 密碼錯誤提示信息 密碼嗅探手動漏洞挖掘會話sessionID Xss / cookie importer Sess

【安全牛學習筆記】手動漏洞挖掘（四）

信息安全 security+ 漏洞 手動漏洞挖掘本地文件包含lfi 查看文件 代碼執行 <?php echo shell_exec($_GET['cmd']);?> Apache access.log遠程文件包含rfi 出現

【安全牛學習筆記】手動漏洞挖掘（三）

信息安全 security+ 漏洞挖掘 手動漏洞挖掘Directory travarsal / File include(有區別/沒區別) 目錄權限限制不嚴 / 文件包含/etc/php5/cgi/php.ini allow_url_include = on應用程序功能操作文件，限制不

Angular5學習筆記 - 創建組件（四）

face generate use span ive style bsp lar register 一、創建組件 ng generate component component-name #簡寫 ng g c component-name ng generate dire

Go語言學習筆記十一： 切片（slice）

操作 容量 方括號 一個 組類型 學習 中學 slice 修改 Go語言學習筆記十一： 切片（slice） 切片這個概念我是從python語言中學到的，當時感覺這個東西真的比較好用。不像java語言寫起來就比較繁瑣。不過我覺得未來java語法也會支持的。 定義切片 切片可以

JAVAscript學習筆記 jsDOM 第五節 （原創） 參考js使用表

doctype count1 長度 pan dom ID BE func alert <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

七月八號linux學習筆記-常見的linux命令（1）

sre 之間 free命令 進程pid windows 監視 red linux學習 網絡文件 一，查看幫助命令1.#man man查看man自身的幫助信息二，常見的系統工作命令1.echo命令 用於在終端輸出字符串或變量提取後的值格式為"echo[字符串|$變量

七月八號linux學習筆記-常見的linux命令（2）

swd login tail 讀取 操作 文件權限 bzip2 嵌套 diff 五，文本編輯命令1.cat命令 用於查看內容較少的的純文本 格式為"cat [選項][文件]"2.more命令 用於查看內容較多的的純文本 格式為"more

C#學習筆記-域用戶認證（一）

byte name urn validate finally tostring code date geb public Boolean ValidateDomainUser(string Domain, string UserName, string