extjs6實戰的簡單介紹

本文目錄一覽：

• 1、extjs 6 grid 更改選中行背景顏色，直影響當前grid
• 2、請問extjs 6 grid怎麼實現合計，合計行要固定在表格下面，不隨縱向滾動條滾，但要隨橫向滾動
• 3、Extjs6 菜單樹左對齊
• 4、extjs6 tree怎麼隱藏選中樹節點
• 5、ExtJS 6有什麼新東西
• 6、有人用extjs（modern|classic）來開發ipad管理軟件嗎

extjs 6 grid 更改選中行背景顏色，直影響當前grid

Ext 4.2.1

/** * @var {color}

* The background-color of the selected row

*/$grid-row-cell-selected-background-color: #ccc !default;

Ext 5

$grid-cell-selected-background-color : color

The background-color of a selected cell when using a Ext.selection.CellModel.

Defaults to:

$grid-row-cell-selected-background-color

Ext 6

$list-item-selected-background-color : color

List item background-color when selected

Defaults to:

mix(#fff, $base-light-color, 25%)

Ext 6 好像依賴 $base-light-color 盡量不要修改其他配置

請問extjs 6 grid怎麼實現合計，合計行要固定在表格下面，不隨縱向滾動條滾，但要隨橫向滾動

簡單給個代碼說明一下:

var grid = new Ext.grid.GridPanel({

……(其他屬性配置略)

columns: [

{header: ‘第一列’, dataIndex: ‘column1’},

{header: ‘第二列’, dataIndex: ‘column2’},

{header: ‘總計’, dataIndex: ‘column1’,renderer : function(value,metadata,reocrd){

//這裏面做總計計算

var sum = record.data.column1+reocrd.data.column2;

//或者 var sum = value+reocrd.data.column2;

return sum;

}

},

],

……(其他屬性配置略)

});

Extjs6 菜單樹左對齊

自動生成的目錄，不能直接設置左對齊，其修改方法：1、單擊引用—目錄—插入目錄；2、彈出目錄對話框，單擊修改按鈕；3、彈出樣式對話框，選擇要修改的目錄，單擊修改按鈕；4、彈出修改樣式對話框，單擊格式按鈕，在彈出選項中選擇段落；5、彈出段落對話框，在對齊方式處選擇左對齊；在縮進處，左側縮進後的輸入框輸入0；在特殊格式處選擇無即可，如圖所示。

extjs6 tree怎麼隱藏選中樹節點

根據api 以及勾選的事件，獲得選中的節點數據

使用setHidden添加參數進行隱藏

如果是隱藏他的上級或者下級在使用api中的查找獲取id進行隱藏。

extjs6.0

ExtJS 6有什麼新東西

以下是官方的介紹：

Ext JS 6統一了Ext JS 5和Sencha Touch框架，且允許創建基於所有平台和所有設備的通用應用程序。在Ext JS 5，將許多Sencha Touch的移動功能帶入了Ext JS，而且建立核心通用代碼。在Ext JS 6，Ext JS和Sencha Touch的UI組件將建立在通用核心之上，這樣，才讓使用單一的代碼來創建基於桌面到智能手機的應用程序成為可能。另外，在Ext JS 6還有大量的增強功能，尤其是在可訪問性、圖表和網格這一塊上。

我們用了一年多了，說實話，和5有區別都不大，就是有些自定義的控件，寫法改變，比以前簡單了，但是總體上沒啥，不細研究，看不出來，當然我們主要是企業級開發

有人用extjs（modern|classic）來開發ipad管理軟件嗎

sencha touch被合併到extjs6裏面，extjs6可以開發桌面端、移動端、甚至通用的web app（針對不同設備類型自動顯示不同的頁面），相同的代碼可以共用，比如桌面端和移動端假如只是界面不同，像model和controller那些如果相同的話可以共用，即便是有些區別也可以寫個父類，然後移動端和桌面端的代碼分別繼承該類並添加額外功能。

另外，extjs6也支持MVVM了，利用官方文檔的最佳實踐MVVM+MVC混合來開發，真的令人很愉悅。

當然我們只是開發移動端的，下面介紹下怎樣做。extjs6引入了toolkit概念，做移動端的toolkit是modern，桌面端的是classic，我們將用它的modern toolkit來開發。

創建一個app：sencha –sdk (sdk目錄) generate app –modern (app名稱) (生成的目錄)

例如：sencha –sdk G:\lib\JavaScript\extjs\ext-6.0.0-gpl\ext-6.0.0 generateapp –modern Test my-test

如果不加「-modern」的話它會自動生成一個通用app，有app、classic和modern三個目錄存放源代碼，app為共用代碼目錄，classic和modern分別為桌面端和移動端的不共用代碼。但我們只是做移動端的，所以存放源碼的就一個app目錄。