翻譯 Ext JS最新技巧 2016 3 4

2021-09-05 04:52:59 字數 2093 閱讀 5545

原文:

top support tips

ext js的grid是乙個便於在布局中顯示資訊的偉大工具。有些使用者可能會希望將這些資訊列印為會議資料或宣傳材料,而且會希望在列印的時候,能新增水印以便進行版權保護、保密或作為品牌的一種方式。

這個很容易實現,只要在ext js的grid中為它指定乙個樣式就行了,而這只需要一些簡單的css技巧。

實現這種效果的關鍵是修改單元格的樣式,並在grid中插入不透明且不會遮蓋grid內容的背景。

要做到這一點,首先是建立乙個新的樣式類,例如,樣式類的名稱為「watermark」,並將它應用到grid的cls配置項:

cls: 『watermark』1
現在可以開始定義css來建立水印效果了。

預設情況下,grid的單元格的背景是白顏色,第一步要做的就是修改單元格的背景,讓它是透明的。要實現這個,要先定義乙個包含「watermark」類的css選擇權,以便讓grid的單元格透明:

.watermark .x-grid-item 123
.watermark .x-grid-body:before 12345678910111213
上門的樣式會在grid的主體前插入內容,並將插入內容完全覆蓋grid的內容。元素中的內容是空的,且應用了背景,背景突破被設定為居中顯示,且完全填充整個元素。上述的不透明度被設定為了0.1(10%),這個可根據需要自行調整。

時不時會有使用者報告嘗試去建立乙個元件的例項時,會在建立附加的例項出現不知名的錯誤。為什麼第乙個例項能工作,而第二個不行呢?下面先來看看一種建立grid比較常見的情況:

ext.define('simpsongrid', ,

columns: [, ],

plugins: [ext.create('ext.grid.plugin.rowexpander', )]

});1234567891011121314151617181920212223

在這裡,定義了乙個簡單的grid,在grid中,使用了rowexpand外掛程式在第二行內顯示內容。這是常見的用來顯示特定記錄的額外資訊的方式。假設應用程式需要在不同的檢視內使用該grid的不同例項來顯示資料,這就會出現問題。

rowexpander類的乙個例項被應用到了simpsongrid類的原型,這意味著所有的simpsongrid類例項將會引用相同的外掛程式例項。當嘗試去展開第乙個gird例項的行主體的時候就會出現問題,這時,可以看到它應用到了第二例項。

要避免出現這類問題,需要使用乙個配置物件來讓框架處理例項化:

plugins: 1234
現在,每乙個grid 的例項都將擁有自己的外掛程式例項。如果要檢視共享外掛程式例項的所出現的問題,可以檢視這個》示例。

union        -r

#remove development mode preprocessor directives/warnings    -debug=false

concat        #compresses the source file using the yui        -yui

#strips comments from the output file, but preserves whitespace        -strip

可以以上這些命令來建立響應檔案,假如檔名為compile.cfg,則可以使用以下命令來執行響應檔案:

sencha @compile.cfg1
響應檔案的相關資訊可檢視《>advanced sencha cmd guide》。

使用exclude選項,就可以方便的通過編輯響應檔案來指定只包含應用程式的源**還是只有框架。

下面將建立乙個只包含執行應用程式所需框架檔案的名為framework.js的檔案:

compile

exclude

and-debug=false    concat

-yui        -strip        -out=framework.js1234567891011121314151617

翻譯 Ext JS最新技巧 2016 3 4

原文 top support tips ext js的grid是乙個便於在布局中顯示資訊的偉大工具。有些使用者可能會希望將這些資訊列印為會議資料或宣傳材料,而且會希望在列印的時候,能新增水印以便進行版權保護 保密或作為品牌的一種方式。這個很容易實現,只要在ext js的grid中為它指定乙個樣式就行...

翻譯 Ext JS最新技巧 2014 8 13

原文 top support tips 在ext js 5,只支援ie8 因此不再古力使用者使用嚴格的html文件型別。現在,推薦使用html 5的文件型別,而且還推薦使用x ua compatible作為meta標記以確保ie不會啟用 相容模式 因為該模式不支援ext js。以下 片段展示了用於e...

翻譯 Ext JS最新技巧 2014 9 10

原文 top support tips 在ext js 5.0.1,新增了一些與可訪問性和支援aria有關的顯著改進。雖然鼓勵使用這些新增功能,但預設樣式可能無法在所有情況下都能達到最理想的狀況。事實上,在單元格邊框實現焦點就不適合所有的情況。如果想對焦點樣式進行調整,最好的方式是通過修改sass變...