A. 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();
B. 如何讓Extjs4.1中的treegrid和treestore實現分頁
Extjs treeGrid分頁實例，項目中用到，拿出來跟大家分享一下，主要是通過兩個store實現。
[javascript] view plain
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : '項目立項',
isShow : 'true',
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {};
Ext.apply(this, _config);
this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : 'ajax',
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : 'json',
root : 'rows',
totalProperty : "totalCount"
}
},
model : 'ProInfo'
});
this.store = Ext.create('Ext.data.TreeStore', {
model : 'ProInfo',
proxy : {
type : 'ajax',
url : 'xmgl/pro-info-manage.action'
},
folderSort : true,
listeners : {
'beforeload' : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT;
_s.proxy.extraParams = this._baseParam;
},
scope : this
}
}
});
this['selModel'] = Ext.create('Ext.selection.TreeModel', {
mode : 'SINGLE',
listeners : {
'selectionchange' : {
fn : this.selectionChangeHandler,
scope : this
}
}
});
this['columns'] = [ {
xtype : 'treecolumn',
text : '項目性質',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : '項目名稱',
flex : 2.5,
dataIndex : 'proName',
sortable : true
}, {
text : '流程狀態',
flex : .75,
dataIndex : 'process',
sortable : true
}, {
text : '項目時間',
xtype : 'datecolumn',
format : 'Y-m-d',
dataIndex : 'crTime',
sortable : true,
flex : .85
}, {
text : '項目編號',
flex : 1,
dataIndex : 'proNo',
sortable : true
}, {
text : '項目單位',
flex : 1,
dataIndex : 'unit',
sortable : true
}, {
text : '優先順序',
flex : .6,
dataIndex : 'priority',
sortable : true
}, {
text : '項目類型',
flex : .75,
dataIndex : 'proType',
sortable : true
}, {
text : '項目內容',
flex : 2,
dataIndex : 'proContent',
sortable : true
}, {
text : '附件數',
flex : .6,
dataIndex : 'fileCount',
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : 'pagingtoolbar',
id : 'PROTREEGRID_PAGEBAR',
store : this.store1,
dock : 'bottom',
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return;
this._treeGrid._baseParam.start = pdata.fromRecord;
this._treeGrid._baseParam.limit = basicConstant.LIMIT;
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
});
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == '收入項目') {
return 'srcss';
} else if (record.get("proClass") == '支出項目') {
return 'zccss';
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : 'TBAR_PROTREEGRID',
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), '-', '項目名稱：', {
xtype : 'textfield',
width : 70
}, '無分項總體項目顯示：', {
xtype : 'checkbox',
checked : true,
width : 70
}, {
text : "查詢",
icon : 'images/icons/search.gif',
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : 'images/icons/del.gif',
handler : this.onReset,
scope : this
}, {
text : "高級查詢",
icon : 'images/icons/search.gif',
handler : this.onAdvSearch,
scope : this
} ]
})
});
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
});
this.store1.load( {
params : this._baseParam
});
},
onSearch : function() {
var _param = {};
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_param.process = _tbar.items.items[0].value;
_param.proClass = _tbar.items.items[2].value;
_param.proName = _tbar.items.items[5].value;
_param.isShow = _tbar.items.items[7].value;
// this.store1.load(1);
this._baseParam = _param
this.reLoadData();
},
onReset : function() {
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_tbar.items.items[0].setValue('項目立項');
_tbar.items.items[2].setValue('');
_tbar.items.items[5].setValue('');
this._baseParam = {
process : '項目立項',
isShow : 'false'
};
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : '項目立項'
}).show();
}
});
C. 本人現在學習ExtJS，誰有ExtJS的入門教程視頻，（清晰版的）適合初次接觸ExtJS的學員使用。
ExtJs視頻教程(上).avi
http://dl.vmall.com/c0ubbdxakh
ExtJs視頻教程1(下).avi
http://dl.vmall.com/c05tezhwon
ExtJs視頻教程10(上).avi
http://dl.vmall.com/c009bcd6dk
ExtJs視頻教程10(下).avi
http://dl.vmall.com/c0fp5fs6oi
ExtJs視頻教程11.avi
http://dl.vmall.com/c0aj02ib0c
ExtJs視頻教程12(上).avi
http://dl.vmall.com/c004973idh
ExtJs視頻教程12(下).avi
http://dl.vmall.com/c001rgrdtm
ExtJs視頻教程13.avi
http://dl.vmall.com/c009ygzh6w
ExtJs視頻教程14.avi
http://dl.vmall.com/c0e0cqlee6
ExtJs視頻教程15.avi
http://dl.vmall.com/c06bm3kof6
ExtJs視頻教程16(上).avi
http://dl.vmall.com/c0gtdad07s
ExtJs視頻教程16(下).avi
http://dl.vmall.com/c09uppmxxg
ExtJs視頻教程17.avi
http://dl.vmall.com/c0x9q2jsy1
ExtJs視頻教程18(上).avi
http://dl.vmall.com/c0r7wsjny8
ExtJs視頻教程18(下).avi
http://dl.vmall.com/c0ljkgvdbt
ExtJs視頻教程19(上).avi
http://dl.vmall.com/c0sxwb3mcs
ExtJs視頻教程19(下).avi
http://dl.vmall.com/c0bne69ab3
ExtJs視頻教程2(上).avi
http://dl.vmall.com/c0rb2nksiv
ExtJs視頻教程2(下).avi
http://dl.vmall.com/c0lntha1ha
ExtJs視頻教程20(上).avi
http://dl.vmall.com/c0xo6ry6uv
ExtJs視頻教程20(下).avi
http://dl.vmall.com/c09bft5oab
ExtJs視頻教程21(上).avi
http://dl.vmall.com/c0e8pmwasl
ExtJs視頻教程21(下).avi
http://dl.vmall.com/c0oc248n7g
ExtJs視頻教程22(上).avi
http://dl.vmall.com/c0x3umxbwa
ExtJs視頻教程22(下).avi
http://dl.vmall.com/c06tuk2ggc
ExtJs視頻教程23.avi
http://dl.vmall.com/c0e7baf0pi
ExtJs視頻教程24(上).avi
http://dl.vmall.com/c0movwp3a4
ExtJs視頻教程24(下).avi
http://dl.vmall.com/c0rg5l5j5b
ExtJs視頻教程25(上).avi
http://dl.vmall.com/c0cov3b0iq
ExtJs視頻教程25(下).avi
http://dl.vmall.com/c0zlis6daw
ExtJs視頻教程26(上).avi
http://dl.vmall.com/c0dkmrgyny
ExtJs視頻教程26(下).avi
http://dl.vmall.com/c0ggz4rsjk
ExtJs視頻教程27(上).avi
http://dl.vmall.com/c0oikptimx
ExtJs視頻教程27(下).avi
http://dl.vmall.com/c0hf8mkvz8
ExtJs視頻教程28(上).avi
http://dl.vmall.com/c0u1dtnapu
ExtJs視頻教程28(下).avi
http://dl.vmall.com/c03aqkretd
ExtJs視頻教程29(上).avi
http://dl.vmall.com/c0iba3xahp
ExtJs視頻教程29(下).avi
http://dl.vmall.com/c0eksgrye9
ExtJs視頻教程3(上).avi
http://dl.vmall.com/c0umiba9au
ExtJs視頻教程3(下).avi
http://dl.vmall.com/c0ayfugdru
ExtJs視頻教程30(上).avi
http://dl.vmall.com/c0b8eyl7tq
ExtJs視頻教程30(下).avi
http://dl.vmall.com/c0wmn2dn4p
ExtJs視頻教程4.avi
http://dl.vmall.com/c0aqzm9bdq
ExtJs視頻教程5(上).avi
http://dl.vmall.com/c0phusez1v
ExtJs視頻教程5(下).avi
http://dl.vmall.com/c0k8cbyyb0
ExtJs視頻教程6(上).avi
http://dl.vmall.com/c0cakxbmae
ExtJs視頻教程6(下).avi
http://dl.vmall.com/c096aiackr
ExtJs視頻教程7(上).avi
http://dl.vmall.com/c0l2yl1m2l
ExtJs視頻教程7(下).avi
http://dl.vmall.com/c05n9sqsp1
ExtJs視頻教程8.avi
http://dl.vmall.com/c0x692rjm6
ExtJs視頻教程9(上).avi
http://dl.vmall.com/c0mmjhyylb
ExtJs視頻教程9(下).avi
http://dl.vmall.com/c0wkfdosff
D. extjs 定義window時右上角有一個關閉按鈕，點擊時是隱藏操作，如何讓它關閉操作
以下是關閉操作的代碼:
//新增會計期間
function openAddDialog(){
//使彈出窗體顯示在最前面
Ext.useShims=true;
var win=new Ext.Window(
{title:"新增",
width:320,
height:250,
html:addDialogStr,
modal:true,
buttons:[{
text:"確認",handler:function(){
alert("確認");
//關閉打開的窗體
win.close();
}, {
text:"取消",handler:function(){
win.close();
}
}]
});
win.show();
}
//點擊右上角的關閉按鈕後
win.on("close",function(){
alert("關閉窗體");
});
}
E. extjs創建grid表格，怎樣實現雙擊表格里某一行數據，跳轉到另一個panel頁面
listeners : {
dblclick : {
element : 'body',
fn : function() {
var _record = sm.getSelection();
scount = _record.length;
if (scount == 0) {//未選擇
Ext.Msg.alert('友情提示', '請選擇...！');
return false;
}
addTab(false);
}
}
},
-------------------
functionaddTab(closable){
++index;
tabs.add({
title:'NewTab'+index,
iconCls:'tabs',
html:'TabBody'+index+'<br/><br/>'+Ext.example.bogusMarkup,
closable:!!closable
}).show();
}
F. 如何定義extjs里按鈕的大小以及改變滑鼠經過時和點擊後的樣式
按鈕的大小可以用空白填充·默認好像就按鈕字元的大小，fn處是點擊後執行的函數，可以在這裡面改變。滑鼠經過用mouseover函數。我也剛開始學，希望可以幫到你