❶ extjs grid怎麼序號自增
ExtJs Grid分頁時,默認情況下每頁的序號都是從1起始的,這往往不符合我們的習慣。這里實現了序 號的自動增加。
實現步驟如下:
1、定義全局變數。
var record_start = 0;
2、Grid的columns部分的定義。
columns:[newExt.grid.RowNumberer({
header:"序號",
width:40,
renderer:function(value,metadata,record,rowIndex){
returnrecord_start+1+rowIndex;
}
}),{
header:"項目編號",
width:50,
sortable:false,
dataIndex:"projectNumber"
}]
3、Grid 的PagingToolbar部分的定義。
bbar:newExt.PagingToolbar({
store:grid_store,
pageSize:8,
displayInfo:true,
beforePageText:"第",
afterPageText:"/{0}頁",
firstText:"首頁",
prevText:"上一頁",
nextText:"下一頁",
lastText:"尾頁",
refreshText:"刷新",
displayMsg:"當前顯示記錄從{0}-{1}總{2}條記錄",
emptyMsg:"沒有相關記錄!",
doLoad:function(start){
record_start=start;
varo={},pn=this.paramNames;
o[pn.start]=start;
o[pn.limit]=this.pageSize;
this.store.load({params:o});
}
})
說明:
1、全局變數record_start用於記錄列表開始的數據點,如第一頁,那麼為0,如第二頁,那麼為8,這 里分頁pagesize設置為了8
2、分頁中doLoad這部分的代碼來自於Ext.PagingToolbar的doLoad方法,PagingToolbar在分頁發生變 化時會調用這個方法來重新load數據,只是多了個對全局變數進行賦值的步驟,為的就是在分頁發生變化 時,記錄傳遞給Url的參數start的值。
3、在columns中實例化Ext.grid.RowNumberer時,重寫了renderer方法,其實之所以這樣做的原因,大家看一下 Ext.grid.RowNumberer源碼中的renderer方法就知道了,就是根據行號+1來設置序號的,這里我們改這個方法,是為了得到行號+分頁變化時得到的start參數的值+1 的值,這樣就能夠正確得到序號結合分頁的數據了。
❷ extjs中gridpanel中怎麼獲得選中行所對應的行數
如果要獲得你選中的項是第幾行,我一般的做法是在gridpanel生成時,隱藏一列id編號項,這樣可以直接回查答詢id即可
var seletedGird = grid.getSelectionModel().getSelections();//獲得選中的項
var rowid = seletedGird[0].get('id');//獲得選中第一項的id列的值
如果沒有設置id編號項,可以搜索store
var seletedGird = grid.getSelectionModel().getSelections();//獲得選中的項
var rowid = grid.getStore().indexOf(seletedGrid[0]);//獲得選中的第一項在store內的行號
❸ extjs中GridPanel怎麼動態生成列
Ext.onReady(function(){
varsm=newExt.grid.CheckboxSelectionModel();
varcm=[newExt.grid.RowNumberer(),sm,
{header:"編號",dataIndex:"id",width:65,hidden:true},
{header:"名稱",dataIndex:"name",width:65},
{header:"路徑",dataIndex:"url",width:65}
]
varfd=["id","name","url"];
varstore=newExt.data.JsonStore({
fields:fd
})
vardata=[{
id:1,name:"xiao",url:"sssssssssss",sex:"male"
}]
vargrid=newExt.grid.GridPanel({
sm:sm,
columns:cm,
store:store,
width:500,
height:400,
tbar:[{
text:"生成",
icon:"images/icons/add.png",
cls:"x-btn-text-icon",
handler:function(){
varres={fields:[{name:"sex"}],columns:[{header:'性別',dataIndex:"sex",width:65}]};
varcolumns=res.columns;
varfields=res.fields;
for(vari=0;i<fields.length;i++){
fd.push(fields[i].name);
cm.push(columns[i]);
}
//重新綁定store及column
ss=newExt.data.JsonStore({
fields:fd
});
grid.reconfigure(ss,newExt.grid.ColumnModel(cm));
ss.loadData(data)
}
}]})varwin=newExt.Window({
title:"sssssss",
width:700,
height:500,
layout:"fit",
closable:true,
items:[grid]
})
win.show();
});
主要是grid里的reconfigure這個方法:配置grid以使用一個不同的Store和Column Model並觸發'reconfigure'事件。 視圖將會被綁定到新的對象並刷新。
這個例子,是一個按鈕加列的,你自己看看改改吧。有問題在問我吧。
❹ extjs4 gridpanel序號超過100以後無法顯示完全
1)設置寬度
columns: [
{ text: 'Name', dataIndex: 'name',
width:100 },
]
2)設置flex
columns: [
{ text: 'Name', dataIndex: 'name',
flex:1 },
]
或者設置grid的forceFit :true
❺ 如何給ExtJs的Grid列表增加自增序列號
首先定義一個序列值變數
var rec_start = 0;
然後在grid的columns中設置序列:
new Ext.grid.RowNumberer({
header : "序號",
width : 40,
renderer: function (value, metadata, record, rowIndex) {
return rec_start + 1 + rowIndex;
}
})
❻ 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 grid列右邊的排序下拉菜單
給grid加上下面這個屬性
enableHdMenu :false
❽ ExtJS Grid關閉默認列點擊排序
Grid的列默認是開啟點擊排序的,點擊列名後就會進行排序。現在要關閉這個功能,只將那些需要排序的列加上這個功能。
1.在Ext.define()加入
如
2.在需要的列添加
如
❾ extjs3.2.1中gridpanel的列除了EXT自身的升降序列,怎麼自定義其它列,具體如圖的過濾器那列一樣。求解!
http://..com/question/271195886.html?fr=qrl&cid=74&index=1
看看這橡扒猛個我之前回答此讓的一個問題跟你梁橋這個類似~
❿ Extjs grid中如何獲取當前(前台)列標題的值,不是按column的順序
class ButtonActionListener implements ActionListener{
private JTextField textField;
public ButtonActionListener(JTextField textField) {
this.textField = textField;
}