extjs grid表格信息提示開發總結

        以前的表格查詢信息提示都採用Ext.Msg.alert()這種方式，即當查詢不到信息或者查詢錯誤的提示。如圖：

        這種提示方式存在操作問題，每次提示都需要點一次確定按鈕，用戶體驗根本不強，還好gridview提供了一個屬性emptyText，當grid沒有信息可供顯示時提示，好了，筆者就在這上面作點文章。

        UI上一般都可以使用html代碼，所以筆者就用一段html代碼的提示信息替換emptyText,效果如下：

        是不是爽多了？這裏使用了一般瀏覽器無法打開網站的提示，你也可以自己寫更漂亮的。這段html代碼很簡單，直接抄過來改改就行，比如：

var text='';

text="<div id='infoPageContainer'>";
		    	text+="<div id='errorTitle'>";
		    	text+="<h1 id='errorTitleText' class='error_h1'>沒有數據</h1>";
		    	text+="</div>";
		    	text+="<div id='errorLongContent'>";      
		    	text+="<!-- Short Description -->";
		    	text+="<div id='errorShortDesc'>";
		    	text+="<p id='errorShortDescText' class='error_p'>系統無法在遠程服務器上查詢到相關信息。</p>";
		    	text+="</div>";
		    	text+="<!-- Long Description (Note: See netinfo.dtd for used XHTML tags) -->";
		    	text+="<div id='errorLongDesc'>";
		    	text+="<ul class='error_ul'>";
		    	text+="<li class='error_li'>遠程服務器上不存在相關信息。</li>";
		    	text+="<li class='error_li'>確保您的查詢條件正確且操作無誤。</li>";
		    	text+="<li class='error_li'>如果您確認存在該信息，並且操作無誤，那麼可能服務器存在錯誤，請與系統管理員聯繫。</li>";
		    	text+="</ul>";
		    	text+="</div>";
		    	text+="<!-- Override section - For ssl infos only.  Removed on init for other";
		    	text+="info types.  -->  ";     
		    	text+="</div>";
		    	text+="<button id='errorTryAgain' autocomplete='off' οnclick=\"retryThis('"+grid.id+"');\" autofocus='true'>重試</button>";
		    	text+="</div>";

var view=grid.getView();
 view.emptyText=text;

需要注意的地方：

          1、必須grid已經渲染後才能設置；

                 當然可以寫afterrender事件，渲染後處理。

          2、設置後使用refresh()刷新即可出現效果；

                 有時刷新無效，看不到效果，此時需要延時設置，這是因爲渲染速度太慢所致，另外原因是grid自帶的行延時渲染所致。

          3、可以自定義提示框：

Ext.Diy=function(){
	return {
               info : function(grid,c){
                         ...........//定義html片段
               }
	};	
}();

          這裏使用c參數判斷是錯誤提示還是沒有查詢到信息的提示，使用方法：Ext.Diy.info(grid,info);或者Ext.Diy.info(grid,error)。

          4、片段中的樣式你用firefox打開一個錯誤網站就可以看到：

.error_html {
    background: none repeat scroll 0 0 -moz-dialog;
}
.error_body {
    color: -moz-fieldtext;
    font: message-box;
    margin: 0;
    padding: 0 1em;
}
.error_h1 {
    border-bottom: 1px solid threedlightshadow;
    font-size: 160%;
    margin: 0 0 0.6em;
}
.error_ul, .error_ol {
    -moz-margin-start: 1.5em;
    -webkit-margin-start: 1.5em;
    margin-left:1.5em;
    margin: 0;
    padding: 0;
}
.error_ul > .error_li, .error_ol > .error_li {
    margin-bottom: 0.5em;
}
.error_ul {
    list-style: square outside none;
}
#errorPageContainer {
    -moz-padding-start: 30px;
    -webkit-padding-start: 30px;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: -moz-field;
    background-image: url("/skin/images/4.png");
    background-position: 30px 30px;
    background-repeat: no-repeat;
    background-size: 48px 48px;
    border: 1px solid threedshadow;
    border-radius: 10px 10px 10px 10px;
    margin: 2em auto auto 2em;
    max-width: 52em;
    min-width: 30em;
    padding: 3em;
    position: relative;
    
}
#infoPageContainer {
    -moz-padding-start: 30px;
    -webkit-padding-start: 30px;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: -moz-field;
    background-image: url("/skin/images/2.png");
    background-position: 30px 30px;
    background-repeat: no-repeat;
    background-size: 48px 48px;
    border: 1px solid threedshadow;
    border-radius: 10px 10px 10px 10px;
    margin: 2em auto auto 2em;
    max-width: 52em;
    min-width: 30em;
    padding: 3em;
    position: relative;
    
}
#errorPageContainer.certerror {
    background-image: url("/skin/images/4.png");
}
.error_body[dir="rtl"] #errorPageContainer {
    background-position: right 0;
}
#errorTitle {
    -moz-margin-start: 80px;
    -webkit-margin-start:80px;
    margin-left:80px;
}
#errorLongContent {
    -moz-margin-start: 80px;
    -webkit-margin-start:80px;
    margin-left:80px;
}
#errorShortDesc > .error_p {
    border-bottom: 1px solid threedlightshadow;
    font-size: 130%;
    overflow: auto;
    padding-bottom: 1em;
    white-space: pre-wrap;
}
#errorLongDesc {
    -moz-padding-end: 3em;
    -webkit-padding-end: 3em;
    margin-right:3em;
    font-size: 110%;
}
#errorLongDesc > .error_p {
}
#errorTryAgain {
    -moz-margin-start: 80px;
    -webkit-margin-start:80px;
    margin-left:80px;
    margin-top: 2em;
}
#brand {
    -moz-margin-end: 10px;
    -webkit-margin-end: 10px;
    margin-right:10px;
    bottom: -1.5em;
    opacity: 0.4;
    position: absolute;
    right: 0;
}
.error_body[dir="rtl"] #brand {
    left: 0;
    right: auto;
}
#brand > .error_p {
    margin: 0;
}
#errorContainer {
    display: none;
}
#securityOverrideDiv {
    padding-top: 10px;
}
#securityOverrideContent {
    background-color: infobackground;
    border-radius: 10px 10px 10px 10px;
    color: infotext;
    padding: 10px;
}
.blacklist:root #errorTitle, .blacklist:root #errorLongContent, .blacklist:root #errorShortDesc, .blacklist:root #errorLongDesc, .blacklist:root .error_a {
    background-color: #772222;
    color: white;
}
.blacklist:root #errorPageContainer {
    background-color: #772222;
    background-image: url("/skin/images/4.png");
}
.blacklist:root {
    background: none repeat scroll 0 0 #333333;
}
.blacklist:root #errorTryAgain {
    display: none;
}

這是筆者已經修改過的，解決了IE,firefox,搜狗三種瀏覽器的兼容問題，其餘未測試。

 

作者：kunoy

出處：http://blog.csdn.net/kunoy

申明：作者寫博是爲了總結經驗，和交流學習之用。
如需轉載，請儘量保留此申明，並在文章頁面明顯位置給出原文連接。謝謝！