extjs4mvcgrid

① Extjs4 獲取grid.panel中的被修改數據，該怎麼處理

Ext.grid.EditorGridPanel afterEdit事件，就是每次編輯完一個列之後就提交到後台進行修改操作

傳回的參數有
e.grid-grid本身。Thisgrid
e.record-正在編輯的record。Therecordbeingedited
e.field-正在編輯的欄位名。Thefieldnamebeingedited
e.value-正在設置的值（value）。Thevaluebeingset
e.originalValue-在編輯之前的原始值。Theoriginalvalueforthefield,beforetheedit.
e.row-grid行索引。Thegridrowindex
e.column-grid行索引。Thegridcolumnindex
listeners:{
afterEdit:function(e){
e.record正在編輯的record。

}

e.field - 正在編輯的欄位名

e.value - 正在設置的值（value）。

e.originalValue - 在編輯之前的原始值。

② Extjs 4.0 怎樣對grid的store多層分組，就是groupField不只是一個，store中數據是多層關系，高手求教，急

1. store中加入屬性groupField: '要分組的欄位專',
   

2. 添加groupingFeature:

   vargroupingFeature=Ext.create('Ext.grid.feature.Grouping',{
   groupHeaderTpl:'要分組的欄位: {name} '

   });

3. 在屬Ext.grid.panel中加入features屬性

   features:[groupingFeature],
   

③ Extjs中如何遍歷grid的數據（正在顯示的數據）

「也就是說顯示在grid的中的數據並不一定是store的數據」這句話是錯誤的！
你用store載入的數據，是經過Record解析的，也就是說，store裝的就是record解析完的數組，而數組里的對象就是你record解析的對象。而你所說的，只是通過renderer方法，把store中的數據renderer後展現在grid上，而這個renderer是屬於ColumnModel的，它只是用來做grid上的顯示，而真正記錄的數據只有sotre！
解決這個有兩種方式：
1.你sotre載入數據之前，把該對象數組重新組織，組織成你真正想要的數據後再load！
2.遍歷store的record記錄，在遍歷到你經過處理的dataIndex時，在按你的處理方式處理遍數據即可！
for(var i=0,len=store.data.length;i<len;i++){
var data = store.getAt(i).data;//data就是對應record的一個一個的對象
data.dataIndex //獲取的就是該對象dataIndex屬性對應的值
.........
}

這兩種說白了就是你真實想要什麼記錄的對象，要麼在sotre之前組織，要麼在遍歷之後組織！總之store所load的數據會一直被store持有著，你不remove也不reload，他就不會變！

④ extjs4.0 grid 選擇全選修改完數據刷新Grid列表後，全選按鈕還是勾中狀態，怎麼去除

var hd_checker = Ext.getCmp("#your grid id").getEl().select('div.x-column-header-checkbox');
var hd = hd_checker.first();
//清空表格頭的checkBox
if(hd.hasCls('x-grid-hd-checker-on')){
hd.removeCls('x-grid-hd-checker-on');
}

該方法僅限於4.1
4.0的話應該也可以用，但要去查下那個Column Header Checkbox是不是使用的x-grid-hd-checker-on這個Cls

⑤ extjs如何獲取Grid中某一行某一列的值

Ext.grid.GridView.getCell( Number row, Number col )：取得指定單元格對應的td元素

例如：

varsStr=Ext.grid.GridView.getCell(0,0);

再給你一些常用的方法、屬性

1、Ext.grid.GridPanel

主要配置項：

store：表格的數據集

columns：表格列模式的配置數組，可自動創建ColumnModel列模式

autoExpandColumn：自動充滿表格未用空間的列，參數為列id，該id不能為0

stripeRows：表格是否隔行換色，默認為false

cm、colModel：表格的列模式，渲染表格時必須設置該配置項

sm、selModel：表格的選擇模式，默認為Ext.grid.RowSelectionModel

enableHdMenu：是否顯示表頭的上下文菜單，默認為true

enableColumnHide：是否允許通過標題中的上下文菜單隱藏列，默認為true

loadMask：是否在載入數據時顯示遮罩效果，默認為false

view：表格視圖，默認為Ext.grid.GridView

viewConfig：表格視圖的配置對象

autoExpandMax：自動擴充列的最大寬度，默認為1000

autoExpandMin：自動擴充列的最小寬度，默認為50

columnLines：是否顯示列分割線，默認為false

disableSelection：是否禁止行選擇，默認為false

enableColumnMove：是否允許拖放列，默認為true

enableColumnResize：是否允許改變列寬，默認為true

hideHeaders：是否隱藏表頭，默認為false

maxHeight：最大高度

minColumnWidth：最小列寬，默認為25

trackMouseOver：是否高亮顯示滑鼠所在的行，默認為true

主要方法：

getColumnModel()：取得列模式

getSelectionModel()：取得選擇模式

getStore()：取得數據集

getView()：取得視圖對象

reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )：使用一個新的數據集和列模式重新配置表格組件

2、Ext.grid.Column

主要配置項：

id：列id

header：表頭文字

dataIndex：設置列與數據集中數據記錄的對應關系，值為數據記錄中的欄位名稱。如果沒有設置該項則使用列索引與數據記錄中欄位的索引進行對應

width：列寬

align：列數據的對齊方式

hidden：是否隱藏列，默認為false

fixed：是否固定列寬，默認為false

menuDisabled：是否禁用列的上下文菜單，默認為false

resizable：是否允許改變列寬，默認為true

sortable：是否允許排序，默認為true

renderer：設置列的自定義單元格渲染函數

傳入函數的參數有：

value：數據的原始值

metadata：元數據對象，用於設置單元格的樣式和屬性，該對象包含的屬性有：

css：應用到單元格TD元素上的樣式名稱

attr：一個HTML屬性定義字元串，例如'style="color:blue"'

record：當前數據記錄對象

rowIndex：單元格的行索引

colIndex：單元格的列索引

store：數據集對象

xtype：列渲染器類型，默認為gridcolumn，其它可選值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等

editable：是否可編輯，默認為true

editor：編輯器

groupName：

emptyGroupText：

groupable：

3、Ext.grid.ColumnModel

主要配置項：

columns：欄位數組

defaultSortable：是否進行默認排序，默認為false

defaultWidth：默認寬度

主要方法：

findColumnIndex( String col )：根據給定的dataIndex查找列索引

getColumnById( String id )：取得指定id對應的列

getColumnCount( Boolean visibleOnly )：取得列總數

getColumnHeader( Number col )：取得列的表頭

getColumnId( Number index )：取得列id

getDataIndex( Number col )：取得列對應的數據欄位名

getIndexById( String id )：取得列索引

getTotalWidth( Boolean includeHidden )

isCellEditable( Number colIndex, Number rowIndex )

isFixed()

isHidden( Number colIndex )

setColumnHeader( Number col, String header )

setColumnWidth( Number col, Number width, Boolean suppressEvent )

setDataIndex( Number col, String dataIndex )

setEditable( Number col, Boolean editable )

setEditor( Number col, Object editor )

setHidden( Number colIndex, Boolean hidden )

setRenderer( Number col, Function fn )

4、Ext.grid.AbstractSelectionModel

主要方法：

lock()：鎖定選擇區域

unlock()：解鎖選擇區域

isLocked()：當前選擇區域是否被鎖定

5、Ext.grid.CellSelectionModel

主要方法：

clearSelections( Boolean preventNotify )：清除選擇區域

getSelectedCell()：取得當前選擇的單元格，返回一數組，其格式：[rowIndex, colIndex]

hasSelection()：當前是否有選擇區域

select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )：選擇指定單元格

6、Ext.grid.RowSelectionModel

主要配置項：

singleSelect：是否單選模式，默認為false，即可以選擇多條數據

主要方法：

clearSelections( [Boolean fast] )：清除所有選擇區域

deselectRange( Number startRow, Number endRow )：取消范圍內的行選擇

deselectRow( Number row, [Boolean preventViewNotify] )：取消指定行的選擇狀態

each( Function fn, [Object scope] )：遍歷所有選擇行，並調用指定函數。當前被選行將傳入該函數中

getCount()：得到選擇的總行數

getSelected()：得到第一個被選記錄

getSelections()：得到所有被選記錄的數組

hasNext()：判斷當前被選行之後是否還有記錄可以選擇

hasPrevious()：判斷當前被選行之前是否還有記錄可以選擇

hasSelection()：是否已選擇了數據

isIdSelected( String id )：判斷指定id的記錄是否被選擇

isSelected( Number/Record index )：判斷指定記錄或記錄索引的數據是否被選擇

selectAll()：選擇所有行

selectFirstRow()：選擇第一行

selectLastRow( [Boolean keepExisting] )：選擇最後行

keepExisting：是否保持已有的選擇

selectNext( [Boolean keepExisting] )：選擇當前選擇行的下一行

selectPrevious( [Boolean keepExisting] )：選擇當前選擇行的上一行

selectRange( Number startRow, Number endRow, [Boolean keepExisting] )：選擇范圍內的所有行

selectRecords( Array records, [Boolean keepExisting] )：選擇一組指定記錄

selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )：選擇一行

row：行索引

selectRows( Array rows, [Boolean keepExisting] )：選擇多行

rows：行索引數組

7、Ext.grid.CheckboxSelectionModel

主要配置項：

singleSelect：是否單選模式，默認為false，即可以選擇多條數據

checkOnly：是否只能通過點擊checkbox列進行選擇，默認為false

sortable：是否允許checkbox列排序，默認為false

width：checkbox列的寬度，默認為20

8、Ext.grid.RowNumberer

主要配置項：

header：行號列表頭顯示的內容

width：列寬，默認為23

9、Ext.grid.GridView

主要配置項：

enableRowBody：是否包含行體

sortAscText：表格標題菜單中升序的文字描述

sortDescText：表格標題菜單中降序的文字描述

columnsText：表格標題菜單中列對應的文字描述

autoFill：是否自動擴展列以充滿整個表格，默認為false

forceFit：是否強制調整表格列寬以適用表格的整體寬度，防止出現水平滾動條，默認為false

主要方法：

focusCell( Number row, Number col )：將焦點移到指定單元格

focusRow( Number row )：將焦點移動指定行

getCell( Number row, Number col )：取得指定單元格對應的td元素

getHeaderCell( Number index )：取得指定表頭對應的td元素

getRow( Number index )：取得指定行對應的tr元素

getRowClass( Record record, Number index, Object rowParams, Store store )：得到附加到表格行上的樣式名

record：當前行的數據記錄對象

index：當前行的索引

rowParams：渲染時傳入到行模板中的配置對象，通過它可以為行體定製樣式，該對象只在enableRowBody為true時才生效，可能的屬性 如下：

body：渲染到行體中的HTML代碼片段

bodyStyle：應用到行體tr元素style屬性的字元串

cols：應用到行體td元素colspan屬性的值，默認為總列數

store：表格數據集

refresh( [Boolean headersToo] )：刷新表格組件

scrollToTop()：滾動表格到頂端

實戰

1：讓gridpanel的滾動條自動滾動到最後一條記錄(動態插入數據)：

grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1);

2:清除gridpanel中有行被選擇的狀態：

grid.getSelectionModel().clearSelections();

⑥ Extjs 4.x 為GridPanel動態添加一行數據

//聲明對應grid的Record對象
var ItemRecord = Ext.data.Record.create([
{name:'itemid'},
{name:'itemcode'},
{name:'itemname'},
{name:'price'},
{name:'mark'}
]);
//點新增按鈕時則執行類似如下函數

function addNewLine2Grid(grid){
var rec = new ItemRecord({ //實例化Record對象，並賦予各欄位初始值
'itemid': 0,
'itemcode': '',
'itemname': '',
'price': 0.00,
'mark': ''
});
grid.store.insert(grid.store.getCount(), rec); //插入新行作為grid最後一行
grid.getView().refresh(); //刷新
//grid.plugins[1].startEditing(grid.store.getCount()-1,4); //編輯最後一行第4列
}

⑦ extjs4.0 mvc模式開發，請問grid某一列的blur事件在控制器要怎麼監聽

請參照extjs的api http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/api/Ext.grid.Panel

它並沒有提供列的blur事件,所以是沒法監聽的。

⑧ ExtJS4如何自動生成控制grid的列顯示、隱藏的checkbox

由於某種原因，需要做一個控制grid列顯示的checkboxgroup，雖然EXTJS4中的gridpanel自帶列表可以來控制列的顯示隱藏，但是有這樣的需求（需要一目瞭然）
下面先上圖

接著前幾天做的工作，今天上午完成了定製欄位，思路是在上面的普通查詢或者高級查詢結束以後，獲得了列的fields，columns等信息，然後交給一個處理函數
makeCustomMadePanel，該函數用來生成checkboxgroup，生成的時候給它加上一個事件，原本以為checkbox會有類似於check的事件，結果API看了看貌似只有個change事件可以用，MD。。
下面貼下自己寫的
makeCustomMadePanel函數。。用來根據grid的列自動生成checkboxgroup（整個grid的標頭內容等信息均從後台得到，不管後台發來一個什麼表，都能生成一個checkboxgroup來控制列的隱藏顯示）
參數分別是gridpanel在reconfigure的時候用到的fields和columns,期中的var
t=grid_a.columnManager.headerCt.items.get(th.itemId);是關鍵。。這句用來獲得grid_a的列信息。。貌似在api中查不到。網上找了幾中方法都不適合。又不想給每個列一個ID。這是在stackoverflow.com/上找到的。。http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly
復制代碼
代碼如下:
function
makeCustomMadePanel(fields,cl)
{
var
x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom'));
for(var
i=0;i<fields.length;i++)
{
x.add(
{
xtype
:
'checkboxfield',
boxLabel
:
cl[i].header,
inputValue
:
fields[i].name,
checked:true,
itemId:i,
name
:
'custom',
listeners
:
{
change
:
function(th,
value,
oldValue,eop)
{
var
t=grid_a.columnManager.headerCt.items.get(th.itemId);
if(t.isVisible()){
t.setVisible(false);
}
else{
t.setVisible(true);
}
//grid_a.columns[3].setVisible(false);
}}
}
);
}
}
在給出customMadePanel
復制代碼
代碼如下:
Ext.define('customMadePanel',
{
extend
:
'Ext.form.Panel',
title
:
'定製欄位',
collapsible
:
true,
items
:
[
{
itemId:'custom',
xtype
:
'checkboxgroup',
fieldLabel
:
'選擇欄位',
columns
:
6,
items
:
[]
}]
//collapsed:true,
});
var
cusMadePanel=new
customMadePanel();
我這種做法的不足也很明顯，makeCustomMadePanel函數中的循環生成checkbox組件太耗時了，38個組件足足花了好幾秒。。用戶體驗肯定不好。。
並且目前是在每次查詢完之後都根據查詢的結果生成一遍。。。我再想想好的解決辦法
今天對makeCustomMadePanel做了優化，生成組件的速度與先前相比提升非常明顯！
復制代碼
代碼如下:
function
makeCustomMadePanel(fields,cl)
cusMade=1;
var
x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom'));
var
fie=[];
for(var
i=0;i<fields.length;i++)
{
//x.add(
var
temp=
{
xtype
:
'checkboxfield',
boxLabel
:
cl[i].header,
//inputValue
:
fields[i].name,
checked:true,
itemId:i,
name
:
'custom',
listeners
:
{
change
:
function(th,
value,
oldValue,eop)
{
var
t=grid_a.columnManager.headerCt.items.get(th.itemId);
//console.log(t.isVisible());
//console.log('break');
if(t.isVisible()){
t.setVisible(false);
}
else{
t.setVisible(true);
}
//console.log(t.isVisible());
//var
t1=grid_a.columnManager.headerCt.items.get(th.itemId);
//console.log(t1);
//grid_a.columns[3].setVisible(false);
}}
};
//console.log(temp);
fie.push(temp);
}
//console.log(fie);
x.add(fie);
思路就是先循環組好需要生成的組件對象，然後一次add，每一次add的開銷非常大，變為一次速度真的提升了很多很多~

⑨ 如何在extjs4中讓一個gridpanel填充滿它的父panel

加入fit布局就可以了layout : 'fit',

},{
title: '系統說明',
layout : 'fit',
contentEl : 'aboutDiv',
collapsible: true,
id : 'mainContent',
region:'center',//指定子面板回所在區域為答center
loader : {}
}]