導航:首頁 > 編程語言 > extjs頁面傳參

extjs頁面傳參

發布時間:2025-06-25 17:41:13

A. 誰會 extjs 教教我

先下載ExtJS的庫,部署到PHP環境下(不懂PHP的去下載一個phpstudy,裡面都集成好了,把ExtJS庫拷貝到www文件夾下就OK了)。

ExtJS不需要你寫任何HTML代碼,你新建一個HTML頁面,引入他的ext-all.css,ext-base-debug.js,ext-all-debug.js(debug是調試版本),打開火狐,搜索插件(firbug)並安裝。然後你新建一個js文件,裡面寫上:
Ext.onReady(function(){
console.log("firbug日誌輸出專用函數console.log,IE不支持");
Ext.Msg.Show("標題","我的ExtJS之旅正式開始");
});
用火狐運行HTML頁面,你的學習之路正式開始(firbug控制欄會輸出"firbug日誌輸出專用函數console.log,IE不支持",頁面上會顯示一個ExtJS風格的alert)。

然後先看他的例子,每個例子都看,並模仿著寫,照抄也無所謂,但是要理解他裡面的參數都是做什麼用的,比如closeAction:"hide"、title:"你好"、resizable:false等等。

你在模仿他例子的時候,你會發現有很多參數都不知道是干什麼用的,打開它的API(php環境下輸入http://localhost/extjs目錄名/docs/index.html)

打開API,開始正式學習它。

當你感覺到自己可以寫一個Window啊,Panel啊,Grid啊之後,去下載陳老闆的ExtJS教學視頻。當然,最好能買一本《深入淺出ExtJS》,個人覺得比較浪費,但是前期入門還是很不錯的。一些陳老闆沒細說的問題,在書里都能找到答案。

加群50011014,陳老闆在群里,但是他生病了。現在(包括以後)很少上線了。能遇到最好,遇不到群里高手也很多,主動雙擊私聊問,一般沒人拒絕你。公聊估計搭理你的不多。

最後補充一下,ExtJS上手慢但是一旦上手之後,開發起來很爽快。基於JavaScript,所以你JavaScript怎麼說也得有最起碼的一點點常識。

祝你好運。

B. ExtJs 大數據量載入顯示時會很慢,例如載入10000多條數據時會很慢,拉拖動條也很慢,請問有什麼解決辦法嗎

可以分頁啊,
每頁顯示500條
盡量不要一次都從資料庫里取出來
翻頁的時候再次訪問資料庫就行啦
10000條頁面負擔太重了,當然會很慢

C. ExtJS中怎樣實現動態主菜單

Ext.Ajax.request({
//後台請求數據
url: 'xxx.php',
success: function (response){
var data = Ext.decode(response.responseText);
//創建空的工具
var MenuBar = Ext.create('Ext.toolbar.Toolbar');
for(var i=0;i<data.length;i++){
var Menu = data[i];
MenuBar.add({
text: Menu.text
handler: 跳轉頁面函數,一般要傳參
});
}
MenuBar.doLayout();
});
沒有親測過,也許會版有點問題,遇到權了再追問吧

D. 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();

E. EXTJS grid 分頁成功但是還是顯示全部數據

不懂你後台怎麼寫的,第一次請求也只要返回15條就可以了,不要返回全部數據。專

extjs分頁,比屬如你有40條數據,你要分頁,每頁15條。
後台做的時候,並不要返回40條,只要返回15條就夠了。然後帶一個總數40條。即可。
這樣,extjs就知道,你有三頁。

F. Extjs的store的load方法傳值問題

store.load({params:{value:findValue,page:1,limit: 15}});和ajax傳參差不多,直接加上就行了,例如上面的value,你就可以帶上樹節點的值。不過要回注意把默認的get提交方法改成答post。actionMethods:{read:'POST'}

閱讀全文

與extjs頁面傳參相關的資料

熱點內容
為什麼開數據顯示不出來 瀏覽:814
手機截屏的圖片怎麼做成word文件 瀏覽:135
壓縮包分割工具 瀏覽:251
uc瀏覽器怎麼都開不了網站 瀏覽:329
流星網路電視注冊機286 瀏覽:666
建設立項文件是指什麼 瀏覽:129
為什麼反詐app無法攔截垃圾簡訊 瀏覽:332
u盤老顯示文件夾快捷接收文件 瀏覽:280
手機數據包怎麼提取 瀏覽:218
隱藏的文件夾如何恢復 瀏覽:688
怎麼看當前網路ip節點 瀏覽:143
mate8nfc固件升級 瀏覽:668
網站沒有下載功能怎麼下載地址 瀏覽:652
vba隱藏的代碼大全 瀏覽:392
禁塑令發改委文件號是多少 瀏覽:867
Sony遙控代碼 瀏覽:662
微信文件受限是什麼意思 瀏覽:932
現在人回收都在哪個網站 瀏覽:805
功放電路教程 瀏覽:10
國內最大知識分享app 瀏覽:538

友情鏈接