1.面板
(1)類結構
Ext.Base
Ext.AbstractComponent
Ext.Component
Ext.container.AbstractContainer
Ext.container.Container
Ext.panel.AbstractPanel
Ext.panel.Panel
(2)常見子類
Ext.window.Window
Ext.form.panel ---form的panel
Ext.panel.Table ---grid的panel
Ext.tab.Panel ---標籤頁的panel
Ext.menu.Menu
Ext.tip.Tip
Ext.container.ButtonGroup
(3)組成面板的部件
底部工具欄,頂部工具欄,面板頭部,面板底部,面板體
2.佈局
(1) Auto自動佈局(Ext.layout.container.Auto)
默認爲自動佈局，採用佈局佈局的模式與HTML流式排版類似
(2) Fit自適應佈局(Ext.layout.container.Fit)
面板裏有且只有一個其它面板資源元素，並且填滿整個body
(3) Accordion摺疊(即手風琴)佈局(Ext.layout.container.Accordion)
同時會初始化多個面板，當一個面板處於打開狀態時，其它面板會處於收起狀態
(4) Card卡片佈局(Ext.layout.container.Card)
它和手風琴佈局類似，也有多個面板；不同之處在於他用按鈕來切換（常用於導航）
(5) Anchor描點佈局[Ext.layout.container.Anchor]
根據容器的大小，自適應來爲容器的子元素進行佈局和定位
A.百分比
B.偏移量
C.參考離邊的距離定位
(6) 多選框佈局[Ext.layout.container.CheckboxGroup]
(7) Column列布局[Ext.layout.container.Column]
列風格的佈局，每一列的寬度可以根據百分比或固定數據來控制
(8) Table表格佈局[Ext.layout.container.Table]
和傳統的HTML的Table佈局方式一樣，同樣具有跨列，跨行的屬性。
(9) Absolute絕對佈局[Ext.layout.container.Absolute]
格局容器X、Y軸的方式絕對定位
(10) Border邊界佈局[Ext.layout.container.Border]
可以控制上、下、左、右、中 (通常用於頁面框架的規劃)
(11) 盒子佈局
Ext.layout.container.Box
Ext.layout.container.HBox 豎排
Ext.layout.container.VBox 橫排
重要參數
Box
flex 具有配置flex的子項，會根據佔有剩餘總量的比值，來決定自己的大小
pack 控制子元素展示的位置(start左面--這時候flex生效，center中間，end後面)
padding 邊距
HBox
align[top,middle,stretch,stretchmax]
VBox
align[left,center,stretch,stretchmax]
3.面板常用的配置屬性
Ext.panel.Panel
(1) closable:true //啓用關閉功能
(2) closeAction:'destroy' //設置關閉窗口後的對象處理[destroy銷燬面板|hide隱藏面板]
(3) hideCollapsible:true //啓用面板隱藏面板體功能
(4) collapsible:true //是否展開面板體
(5)
4.Ext.tab.Panel標籤頁，一種特殊的佈局方式
常用方法
setActiveTab( Ext.Component card) 設置當前顯示的標籤頁
1.關於圖表
圖表的軸(axes)
(1) 數值軸 Ext.chart.axis.Numeric
(2) 時間軸 Ext.chart.axis.Time
(3) 分類軸 Ext.chart.axis.Category
(4) 儀表軸 Ext.chart.axis.Gauge
圖表的類型
(1) 折線圖 Ext.chart.series.Line
(2) 柱形圖 Ext.chart.series.Column
(3) 餅狀圖 Ext.chart.series.Pie
(4) 條形圖 Ext.chart.series.Bar
(5) 面積圖 Ext.chart.series.Area
(6) 雷達圖 Ext.chart.series.Radar
(7) 散點圖 Ext.chart.series.Scatter
(8) 儀表圖 Ext.chart.series.Gauge
常用屬性
highlight高亮，label標題，tips提示，renderer格式化
1.根類
Ext.form.Basic
提供了表單組件,字段管理,表單提交,數據加載的功能
2.表單的容器
Ext.form.panel
容器自動關聯 Ext.form.Basic的實例對象,更方便的進行字段的配置
重要屬性
defautType : "" （設置默認子項的xtype）
3.數據交互和加載
Ext.form.action.Action（兩種表單自身的提交方式）
Ext.from.action.Submit Ajax方式提交
Ext.form.action.StandardSubmit 原始鼻癌單提交方法
Ext.form,action.DirectLoad
Ext.form.action.DirectSubmit 類似於dwr的方式提交
4.字段的類型
Ext.form.field.Base 根類
混入了的類[Ext.form.field.Field]得到表單的處理功能
混入了的類[Ext.form.Labelable]得到表單標籤錯誤信息提示功能
Ext.form.field.Text 文本框方式的如下：
Ext.form.field.TextArea 富文本域
Ext.form.field.Trigger 觸發器
Ext.form.field.Picker 觸發器子類（選擇器）
Ext.form.field.Time
Ext.form.field.Date
Ext.form.field.Number
Ext.form.field.file 文件上傳
Ext.form.field.ComboBox 選擇框
Ext.form.field.Checkbox 選擇框方式的
Ext.form.field.Radio 單選框
Ext.form.field.Hidden 特殊的--隱藏字段（數據頁面不顯示，但後臺需要）
Ext.form.field.HtmlEditor 特殊的--文本編輯框
5.其中夾雜佈局的類
Ext.form.FieldContainer
Ext.form.CheckboxGroup
Ext.form.RadioGroup
Ext.form.Label
Ext.form.Labelable
Ext.form.FieldSet
Ext.form.fieldContainer (裏面可以放多個表單項，進行統一佈局)
6.常用的組件配置
Ext.form.Panel
重要的配置項
title:'',
bodyStyle:'',
frame:true,
height:122,
width:233,
renderTo:'',
defaultType:'',
defaults:{
allowBanlk:true,
msgTarget:'side',
pageSize:4 //配置這個參數即可在下拉框內一分頁的形式操作數據
},
由於混入了Ext.form.labelable所以可進行如下配置；
labelSeparator 字段的名稱與值直之間的分隔符
labelWidth 標籤寬度
Ext.form.field.Text 文本框(xtype:textfield)
重要配置項
width:156,
allowBlank:false,//不能爲空
labelAlign:'left',
msgTarget:'side' //在字段的幼斌展示提示信息
grow:false,//是否在這個表單字段規定長度內，自動根據文字的內容進行伸縮
selectOnFocus：true, //當字段的內容得到焦點的時候，選擇所有文本
regex : /\d+/g,
regexText : '請輸入數字',
inputType:'password',//其它類型：email、url等。默認text
//vType:'IPAddress'用於數據校驗,Ext.form.field.VTypes
//如果校驗不是你想要的，可以自定義，如下：
//custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i //不符合正則的，鍵盤整麼輸入，都不起作用
});
Ext.form.field.Number
重要的配置項
allowDecimals：false,//不能輸入小數
hideTrigger:true,//隱藏框幫邊的調節按鈕
decimalPrecision : 3,//自動四捨五入,保留小數位爲3位。
emptyText：'請輸入小數'//默認框內灰色提醒
//指定範圍
minValue:10,
maxValue:100,
baseChars:'01',//表示框內只能輸入0和1
step:'0.8',//指定步長
Ext.form.field.ComboBox
Ext.view.BoundList 約束列表
重要屬性
listConfig：{
//規劃下拉框到底是什麼樣的樣式
//這裏面的值是根據BoundList裏面的屬性進行初始化的
getInnerTpl:function()
{
return "<div style='color:red'>${name}</div>";//動態改變下拉框內容樣式
}
}
queryMode:'remot', //local(本地數據)|remot(遠程數據)
valueFiled:'id',//後臺需要
displayField:'name'//頁面顯示的
forceSelection:true, //必須選中數據集合中有的數據
minChars:2,//表示輸入2個字符的的時候，就到後臺請求數據
queryDelay:400,
queryParam:'name',//指定往後臺傳入的參數名稱,對應的參數值是你輸入的參數
multiSelect:true, //允許多選
typeAhead:true, //自動補全
Ext.form.field.Date
重要屬性
disableDays:[0,6] //週日與週六不能選爲灰色
7.常用事件
當字段類型爲xtype:'triggerfield',它具有onTriggerClick事件，
經常用於從其它彈出表格中選擇某個值。
8.常用操作
獲取表單中某項的值
var fieldValue = Ext.getCmp('表單id').getForm().findField('字段名稱').getValue();
自動填充表單的各項值
loadRecord( Ext.data.Model record) : Ext.form.Basic
Loads an Ext.data.Model into this form by calling setValues with the record data. See also trackResetOnLoad.
1. 類結構
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel --- 他是和grid完全一樣的
2. 主要配置項
title 標題
width 寬
height 高
renderTo 渲染到什麼地方
root 控制根節點(Ext.data.Model/Ext.data.NodeInterface)
animate : Boolean 控制收起和展開是發有動畫效果
store: store 數據集合
rootVisible : false,//控制顯隱的屬性
重要事件
itemclick:function(tree,record,item,index,e,options)
重要方法
expandAll
collapseAll
getChecked
appendChild
3. Ext.data.TreeStore
重要屬性
defaultRoodId //指定根節點
4. 樹形的拖拽（插件）
Ext.tree.ViewDDPlugin
alias ：'plugin.treeviewdragdrop'
需要在tree的panel下面加
viewConfig:{
plugins:{
ptype :'treeviewdragdrop',
appendOnly:true //加上這個葉子節點之間拖拽時，會彈出圖形警告。
}
}
事件
listeners:{
drop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition)
beforedrop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction)
}
5. 關於節點的拷貝與粘貼
重要方法
updateInfo（把更新的節點屬性值，更新顯示的界面）
6. 關於刪除節點操作
重要方法
remove（節點的方法）
7. 多列樹的配置
主要配置項
columns（與表格一樣）
8. 級聯選中，以及級聯不選中
9. 關於Store的Proxy裏的api應用
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
proxy:{
//Proxy裏面的api屬性，可以存放crud的後臺url，通過前臺就可以取到
api:{
update:"/extjs/extjs!updateDept.action",
remove:"/extjs/extjs!delDept.action"
}
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
}
});
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部門樹形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制顯隱的屬性
config：{
copyNodes:'' //充當剪切板的作用,臨時存放樹節點
}
//裏面得配置與表格類似
columns:[
{
xtype:'treecolumn',
text:'text',
width:150,
dataIndex:'text'
},{
text:'info',
dataIndex:'info'
}
],
viewConfig:{
plugins:{
ptype :'treeviewdragdrop',
appendOnly:true //加上這個葉子節點之間拖拽時，會彈出圖形警告。
}
listeners:{
drop:function(node,data,voerModel,dropPosition,options){
alert("把："+data.records[0].get('text')+"移動到："+overModel.get('text'));
}
beforedrop:function(node,data,overModel,dropPosition,dropFunction){
if(overModel.get("leaf")) //如果把一個節點拖到一個葉子節點下面時，這時我可以把葉子節點修改爲費葉子節點，就可以放了。
{
overModel.set('leaf',true);
}
}
}
}
dockedItems:[{
xtype:'toolbar',
dock:'left',
//ui:'footer',
items:[
{xtype:'button',text:'add',id:'add'},
{xtype:'button',text:'copy',id:'copy'},
{xtype:'button',text:'delete',id:'delete'}
{xtype:'button',text:'delete',id:'paste'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展開全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore'
});
Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
"deptTree":{
checkchange:function(node,checked,options){
if(node.data.leaf == false)
{
if(checked){
//先展開節點
node.expand();
//遍歷子節點，如果遇到非葉子節點，將遞歸遍歷
node.eachChild(function(n){
n.data.checked = true;
n.updateInfo({checked:true});
})
}else
{
//先展開節點
node.expand();
//遍歷子節點，如果遇到非葉子節點，將遞歸遍歷
node.eachChild(function(n){
n.data.checked = false;
n.updateInfo({checked:false});
})
}else
{
//只要有一個葉子節點沒有選中,父節點都不應該選中
if(!checked){
node.parentNode.data.checked = false;
node.parentNode.updateInfo({checked:false});
}
}
}
var tree = b.ownerCt.ownerCt;
//得到選中數據集合
var nodes = tree.getChaecked();
for(i=0;i<nodes.length;i++)
{
nodes[i].remove(true); //刪除該節點
}
},
"deptTree button[id=delete]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到選中數據集合
var nodes = tree.getChaecked();
for(i=0;i<nodes.length;i++)
{
nodes[i].remove(true); //刪除該節點
//通過ajax向後臺提交刪除數據
//通過這種方式也是可以自動提交到後臺的，不過數據可能不是你所需要的。
//tree.getStore().getProxy().update(new Ext.data.Operation(
//{action:'remove'} //你寫什，它就會提交那個url，eg：{action:'update'}
//));
//自己組裝參數Ajax的提交（常用）
Ext.Ajax.request({
//通過這種方式就可以直接獲取到store裏面配置的url
//避免url到處亂寫
//其實就是利用了store的proxy裏面已經有的api屬性來存放url集合
url: tree.getStore().getProxy().api['remove'],
params: {
id: nodes[i].data.id
},
success: function(response){
var text = response.responseText;
// process server response here
}
});
}
},
"deptTree button[id=copy]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到數據集合
var nodes = tree.getChaecked();
if(nodes.length>0){
//把數據放到剪切板中
tree.setCopyNodes(Ext.clone(nodes));
for(i=0;i<nodes.length;i++)
{
nodes[i].data.checked = false; //這個只是更新節點的屬性值，並沒有更新顯示到頁面
nodes[i].updateInfo();//更新顯示到頁面
}
}
}
},
"deptTree button[id=paste]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//獲得被追加孩子的節點集合
var checkNodes = tree.getChecked();
//去剪切板中取數據
var nodes = tree.getCopyNodes();
if(checkNodes.length == 1 && nodes.lenght > 0){
// 被追加孩子的節點
var node = checkNodes[0];
for(i=0;i<nodes.length;i++){
var el = nodes[i].data;
//在這裏可以進行組裝數據傳入後臺
node.appendChild(el);
}
}else{
alert("剪切板中沒有數據或沒有選中節點");
}
}
},
"deptTree button[id=allopen]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.expandAll();
}
},
"deptTree button[id=allclose]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.collapseAll();
}
},
"deptTree button[id=add]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
if(nodes.length == 1){
var node = nodes[0];
node.appendChild({
checked:true,
text:'技術架構組',
id : '0103',
leaf:true
});
}else{
alert("請您選擇一個節點");
}
}
},
"deptTree":{
itemclick:function(tree,record,item,index,e,options){
alert(record.get('id'));
}
}
});
},
views:[
'deptView'
],
stores :[
'deptStore'
],
models :[
]
});
1. 表格面板類Ext.grid.Panel基本屬性。（兩個別名xtype:gridpanel, grid）
重要的配置參數：
（1）columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
列裏面的常用配置參數：
text : String 列的標題 默認是""
dataIndex : String 和Model的列一一對應的
field: {} //配合插件使用，告訴插件在那一列起作用
xtype:默認爲gridcolumn
renderer : function(value) //可以列裏面值顯示之前，做一些改變。
//參數value就是列的值，我可以在函數處理後，返回其改變後的值。
（2）title : String 表格的標題，如果不寫默認表格是沒有頭標題那一欄。
（3）renderTo : Mixed 把表格渲染到什麼地方，即展示到那個元素裏面。
（4）width : Number 寬
（5）height: Number 高
（6）frame : Boolean 是否填充渲染這個Panel（渲染的比較好看）
（7）forceFit : true 設定表格列的長度是否自動填充
（8）store : store 數據集合
（9）tbar: [] 頭部工具欄，裏面可以放置各種按鈕
（10）bbar：[] 底部操作欄，一般放分頁面板
（11）dockedItems : Object/Array 更具有位置的靈活性,當你用這個屬性時,
可以指定工具條停靠在表格中上下左右位置；可以用來替換tbar與bbar。
（12）selType : 'checkboxmodel'/'rowmodel'/'cellmodel',
選擇模式即選中記錄方式：選擇框/鼠標單擊或雙擊行選擇/鼠標單擊或雙擊單元格選擇
（用多選框模式時,forceFit屬性最好不啓用，或則樣式不好看）
（13）multiSelect :true,//允許多選 與上面屬性聯合屬性
（14）plugins :[] 插件的形式，爲表格添加一些特殊的功能（eg：單元格編輯、行編輯以及行拖拽等）
例子可以參考上面MVC裏面view層裏面的grid定義。
2. 常用表格的列都有哪些類型。
（1）Ext.grid.column.Column xtype: gridcolumn 普通列
（2）Ext.grid.column.Action xtype: actioncolumn
在表格中渲染一組圖標按鈕,並且爲他賦予某種功能，類似於鏈接
altText : String 設置應用image元素上的alt
handler : function(view,rowindex,collndex,item,e);
icon : 圖標資源地址
iconCls : 圖標樣式
items : 多個圖標的數組 //在使用MVC的時候建議不要用 如果大家有好得放大請與uspcat聯繫
function(o,item,rowIndex,colIndex ,e)
stopSelection : 設置是否單擊選中不選中
（3）Ext.grid.column.Boolean xtype: booleancolumn
falseText,
trueText
（4）Ext.grid.column.Date xtype: datecolumn
format:'Y年m月的日'
（5）Ext.grid.column.Number xtype: numbercolumn
format:'0,000'
（6）Ext.grid.column.Template xtype: templatecolumn
xtype:'templatecolumn',
tpl :"${字段的名稱}" 可以進行動態的組合字段的值，作爲該字段的值。
（7）Ext.grid.RowNumbererxtype: rownumberer //顯示行號
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1000,
height: 280,
columns : [ //列模式
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:200,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'sex',
dataIndex:'sex',
width:50,
DDName:'sy_sex',
renderer:function(value){
if(value){
if(value == "女"){
return "<font color='green'>"+value+"</font>"
}else if(value == "男"){
return "<font color='red'>"+value+"</font>"
}
}
}
},{
text:'isIt',
dataIndex:'isIt',
xtype : "booleancolumn",
width:50,
trueText:'是',
falseText:'不是'
},{
text:'birthday',
dataIndex:'birthday',
xtype : "datecolumn",
width:150,
format:'Y年m月d日'
},{
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
width:150,
format:'0,000'
},{
text:'描述',xtype:'templatecolumn',
tpl:'姓名是{name} 年齡是{age}',
width:150
},{
text:'Action',xtype:'actioncolumn',
id:'delete',
icon:'app/view/image/table_delete.png',
width:50//,
// items :[
// {},{}
// ]
// handler:function(grid,row,col){
// alert(row+" "+col);
// }
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'刪除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
}],
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2 //單擊幾下
})
],
selType:'checkboxmodel',//設定選擇模式
multiSelect:true,//運行多選
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
3. 選擇模型Ext.selection.Model的用法（嵌套在一些高級組件使用）以及表格的一些特性功能。
選擇模型Ext.selection.Model的用法
（1）選擇模式的根類Ext.selection.Model (通過選擇模式裏面提供的方法進行操作行的選擇)
重要方法：
撤銷選擇 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
得到選擇的數據getSelection( ) : Array
得到最後被選擇數據getLastSelected( ) : void
判斷你指定的數據是否被選擇上isSelected( Record/Number record ) : Boolean
選擇你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
keepExisting true保留已選則的項,false重新選擇，不保留已選則的項
（2） 隱藏了一個單元格的選擇模式 selType: 'cellmodel' (從這發現的Ext.grid.plugin.CellEditing)
重要方法
得到被選擇的單元格getCurrentPosition() Object
Ext.JSON.encode()
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
selectByPosition({"row":5,"column":6}) 很實用，選中你要特殊處理的數據單元格
（3） Ext.selection.CheckboxModel 多選框選擇器
重要方法
（4）Ext.selection.RowModel rowmodel 行選擇器（通過鼠標單擊表的行記錄進行選擇）
重要屬性
multiSelect 允許多選
simpleSelect 單選選擇功能
enableKeyNav 允許使用鍵盤上下鍵選擇
表格的一些特性功能
（1）Ext.grid.feature.RowBody 表格的行體（在行的下面來一個空白行，顯示你所需要的信息）
重要方法
getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
如果你要展示這個面板那麼必須複寫這個方法
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData:function(data,idx,record,orig){
......
}
})
],
2.必須返回行體的對象
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: "",
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
（2）Ext.grid.feature.AbstractSummary negative 能夠在表格數據的最後做一些統計功能。
（eg：統計某一列的平局值等）
Ext.grid.feature.Summary
實用方法是在
第一步
features: [{
ftype: 'summary'
}],
第二步
columns中配置summaryType: 'count', (count,sum,min,max,average)
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format(' : '+value);
}
用於對某一列，進行求平均值等。
（3）Ext.grid.feature.Grouping
在store中設置可以分組的屬性
groupField : ' '
在view中增加代碼
Ext.create("Ext.grid.feature.Grouping",{
groupByText : "職業分組",
groupHeaderTpl : "職業{name} 一共{rows.length}人",
showGroupsText : "展示分組",
startCollapsed : true
}
（4）其它功能:
重要事件
groupclick
groupdblclick
groupcontextmenu
groupexpand
groupcollapse
（5）Ext.grid.feature.GroupingSummary
（6）Ext.grid.feature.Chunking
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1100,
height: 450,
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: record.get('email'),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}),{
ftype: 'summary'
},Ext.create("Ext.grid.feature.Grouping",{
groupByText : "性別分組",
groupHeaderTpl : "性別{name} 一共{rows.length}人",
showGroupsText : "展示分組"
})
],
columns : [ //列模式
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100,
summaryType:'average',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.util.Format.number(value,"00.0")
}
},
{text:"email",dataIndex:'email',width:200,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'sex',
dataIndex:'sex',
width:50,
DDName:'sy_sex',
renderer:function(value){
if(value){
if(value == "女"){
return "<font color='green'>"+value+"</font>"
}else if(value == "男"){
return "<font color='red'>"+value+"</font>"
}
}
}
},{
text:'isIt',
dataIndex:'isIt',
xtype : "booleancolumn",
width:50,
trueText:'是',
falseText:'不是'
},{
text:'birthday',
dataIndex:'birthday',
xtype : "datecolumn",
width:150,
format:'Y年m月d日'
},{
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
width:150,
format:'0,000'
},{
text:'描述',xtype:'templatecolumn',
tpl:'姓名是{name} 年齡是{age}',
width:150
},{
text:'Action',xtype:'actioncolumn',
id:'delete',
icon:'app/view/image/table_delete.png',
width:50//,
// items :[
// {},{}
// ]
// handler:function(grid,row,col){
// alert(row+" "+col);
// }
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'del',text:'刪除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'},
{xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
}],
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
})
],
//selType:'rowmodel',//設定選擇模式
selType:'cellmodel',
//multiSelect:true,//運行多選
//enableKeyNav :true,
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist':{
itemclick:function(View, record, item, index, e, options ){
var sm = View.getSelectionModel();//.getSelection();
//alert(Ext.JSON.encode(sm.getCurrentPosition()));
sm.selectByPosition({"row":1,"column":2});
}
},
'userlist button[id=selection]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var sm = gird.getSelectionModel();
//sm.deselect(0);
//alert(sm.getLastSelected().get('name'))
//alert(sm.isSelected(0));
//sm.selectRange(1,2,true);
sm.selectByPosition({"row":2,"column":3});
}
},
'userlist button[id=del]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要選擇一條數據");
}else{
//1.先得到ID的數據(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.後臺操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
})
}
})
//3.前端操作DOM進行刪除(ExtJs)
}
}
},
"userlist actioncolumn[id=delete]":{
click : function(o,item,rowIndex,colIndex ,e){
alert(rowIndex+" "+colIndex);
}
}
});
},
views:[
'List'
],
stores :[
"Users"
],
models :[
"User"
]
});
4.插件使用以及其它的特性使用。
（1）可編輯插件的根 Ext.grid.plugin.Editing
Ext.grid.plugin.Editing
Ext.grid.plugin.CellEditing 這個不講(之前課程講過)
保存修改的兩種辦法：
a、設立保存按鈕,用戶單擊的時候保存數據
st.sync(); //數據與後臺進行同步，一般不用，他會把整個記錄傳到後臺
//如果不寫這句，下面的語句是得不到數據的
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
model.commit(); //前臺的小紅點會消失
});
我們可以selectModel來獲得修改的數據，組裝後在往後臺傳入。
b.註冊edit事件
e.record.commit(); //前臺的小紅點會消失
Ext.grid.plugin.RowEditing
使用方法:(有Bug推薦4.0.1a版本還是不要用這個功能)
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
（2）Ext.grid.plugin.DragDrop 表格拖拽
主意:配置有變化
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放組的名稱
dragGroup :'userlist', //拖拽組()名稱
dropGroup :'userlist' //釋放租名稱
enableDrag:true, //是否啓用
enableDrop:true
})]
}
處理事件
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i<st.getCount();i++){
st.getAt(i).set('index',i+1);
}
}
}
（3）Ext.toolbar.Paging 分頁組件
//第一種常用分頁
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
//第二種分頁的形式(條狀，撥動分頁)
Ext.Loader.setPath('Ext.ux', 'http://www.cnblogs.com/../extjs4/examples/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.SlidingPager'
]);
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {}) ---- 重點是這
})
（4）Ext.grid.property.Grid
屬性配置框面板
當通過頁面自動配置一些屬性時候了可以考慮用
（5）列鎖定
{text:"age",dataIndex:'age',width:100,locked:true},類似於excel裏的凍結功能
（6）複雜表頭
列裏面又包含列(不能和字段過濾一起使用)
columns：{
text:'other',columns:[
{text:"age",dataIndex:'age',width:100,locked: true},
{text:"int",dataIndex:'index',width:100}]
}
（7）字段過濾
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
Ext.define("AM.class.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}
]
})
view層中
features: [Ext.create("AM.class.filters")],
列中添加配置{filterable: true,text:"age",dataIndex:'age',width:100,filter: {type: 'numeric'}}
Ext.define("AM.util.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}
]
})
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',
frame : true,//面板渲染
width : 500,
height: 380,
columns : [ //列模式
//{text:"Name",dataIndex:'name',width:100,locked:true},
{text:"Name",dataIndex:'name',width:100},
//{text:'others',columns:[
{text:"age",dataIndex:'age',width:100,filterable: true,filter: {type: 'numeric'}},
{text:"email",dataIndex:'email',width:250,
field:{
xtype:'textfield',
allowBlank:false
}
},{
text:'index',dataIndex:'index',width:100
}
//]}
],
features: [Ext.create("AM.util.filters")],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'刪除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'},
{xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
}],
//plugins:[
// Ext.create("Ext.grid.plugin.CellEditing",{
// clicksToEdit : 2
// })
// Ext.create('Ext.grid.plugin.RowEditing', {
// clicksToEdit: 1
// })
//],
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放組的名稱
dragGroup :'userlist', //拖拽組名稱
dropGroup :'userlist', //釋放租名稱
enableDrag:true, //是否啓用
enableDrop:true
})],
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i<st.getCount();i++){
st.getAt(i).set('index',i+1);
}
}
}
},
//selType:'checkboxmodel',//設定選擇模式
//multiSelect:true,//運行多選
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
從這個圖中我們可以很清楚的看到M 、V、C在ExtJS4.0裏面所對應數據類型。
靠右邊是對應的代碼結構。
下描述一下這model、store、view、controller以及application這幾者之間的關係。
（1）application：它是MVC的入口，用來告訴ExtJS到那裏去找對應js文件以及啓動加載controller與view連個模塊的代碼。
//打開動態加載js功能
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',//應用的名字 (根) 利用MVC時這時定義的包路徑需要與命名空間的層次關係一致
appFolder : "app",//應用的目錄
launch:function(){//當前頁面加載完成執行的函數
Ext.create('Ext.container.Viewport', { //簡單創建一個試圖（填充整個瀏覽器）
layout:'auto',//自動填充佈局
items: {
xtype: 'userlist', //引用已經定義的別名進行初始化類
title: 'Users',
html : 'List of users will go here'
}
});
},
controllers:[
'Users'
]
});
（2）controller：這一層主要是用來處理業務邏輯，即View上一些動作所觸發要執行的操作都在此實現。同時它也是關聯view、store以及model的地方。
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist button[id=delete]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要選擇一條數據");
}else{
//1.先得到ID的數據(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.後臺操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
})
}
})
//3.前端操作DOM進行刪除(ExtJs)
}
}
}
});
},
views:[
'List' //必須是文件名稱
],
stores :[
"Users" //
],
models :[
"User" //這個就是store裏面引用的model，所在js文件的名字，保持和定義model的類名一樣。eg:AM.model.User
//（這個主要是給store層用的，當store在當前緩存中找不到指定命名空間定義的model時，再去加載User.js文件，
//再根據文件內容初始化定義model。如果緩存中已經有了model的定義，其實這個是可以不要的。）
//同樣views、store都可以通過各種各樣的工廠生成，來去掉。
]
});
（3）model、store：它們倆主要做爲模型數據層。主要是給view層提供數據展示的。
//User數據集合
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
storeId: 's_user',
proxy:{
type:'ajax',
url:'/extjs/extjs!getUserList.action',
reader: {
type: 'json',
root: 'topics'
},writer:{
type:'json'
}
},
autoLoad: true //很關鍵
});
（4）view：這一層主要負責頁面展示，也是確確實實能看見的一層。
<SPAN style="COLOR: #008000">Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//標題
alias: 'widget.userlist',//別名定義
frame : true,//面板渲染
width : 600,
height: 280,
columns : [ //列模式
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:350,
field:{
xtype:'textfield',
allowBlank:false
}
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'刪除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
}],
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
})
],
selType:'checkboxmodel',//設定選擇模式
multiSelect:true,//運行多選
store : 'Users',
initComponent:function(){
this.callParent(arguments);
}
});
</SPAN>
//json格式的數據
var jsondata = "{id:'01',name:'uspcat.com','age':26,email:'[email protected]'}";
//xml格式的數據
var xmldata = "<user><name>mlmlml</name><age>19</age></user>";
//構建Ext的Ajax請求
Ext.Ajax.request({
url : 'person.jsp',
method : 'POST',
timeout :3000,
//請求的參數值
params:{id:'01'},
//可以提交form表單，只需要寫表單的ID
form:"myform",
//下面是兩種不同格式的請求參數
jsonData:jsondata,
xmlData：xmldata,
//一些操作的函數，第一個爲響應的值，第二個參數是請求的參數值
success :function(response , options){
alert(eval(response.responseText)[0].name);
},
failure :function(response , options){
alert(response.responseText+" "+options)
}
});
//get通過dom元素的id方式獲得的是元素的對象
//getCmp通過定義對象ID的方式獲得的是定義的對象，而不是簡簡單單的元素了
//getDom通過dom元素的id方式獲得的是dom元素
var time = Ext.get("time").getLoader();
//ajax常用的局部改變元素的值
time.load({
url:'/extjs/extjs!getTime.action',
renderer:function(loader,response,request){
var time = response.responseText;
Ext.getDom("time").value = time;
}
});
//給元素設置定時的axja請求方式
i.startAutoRefresh(1000,{
url:'/extjs/extjs!getI.action',
renderer:function(loader,response,request){
var i = response.responseText;
Ext.getDom("i").value = i;
}
});
//這個是直接到頁面中獲得元素的對象
var div01 = Ext.core.Element.fly("div01");
//鼠標滑過的時候增加一個樣式滑出的時候移除樣式,值是樣式的名稱
div01.addClsOnOver("divC");
//這個是直接到Ext.ComponentManagerMap中拿，沒有的話，就用第一個到頁面中拿，再返回
var input01 = Ext.get("input01");
var fn1 = function(){
alert("單擊B按鈕調用這個函數")
}
//給一個輸入框添加鍵盤B鍵響應功能
//key是你要觸發的那個鍵，ctrl是否需要與ctrl鍵結合，fn是觸發函數
input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,scope:input01});
//和上面一本一樣，只是添加更加複雜的，處理起來更加方便
/*第一個觸發條件的參數是一個對象(條件可以進行組合):
{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}*/
//第二個是觸發函數fn
input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){
alert("單擊ctrl+x")
},input01);
function createChild(){
var el = document.createElement("h5");
el.appendChild(document.createTextNode("我是被追加的"));
return el;
}
Ext.get("div02").appendChild(createChild());
//通過構造對象，來創建DOM
Ext.getBody().createChild({
tag:'li',
id:'item1',
html:'我是第一個個節點'
});
Ext.get("d1").addClsOnOver("c");
Ext.util.CSS.getRule(".c",true);
Ext.util.CSS.removeStyleSheet("red");
Ext.util.CSS.updateRule(".c","color","#990055");
（2）.Ext.util.ClickRepeater click的轉發器是Ext.util.Observable的子類
//控制元素在指定時間內被單擊(當前元素沒有數失去焦點)
var cl = new Ext.util.ClickRepeater(Ext.get("b4"),{
delay:3000,//首次單擊時候的間隔事件
interval:4000,//發生首次重複事件調用之後每一次事件的相隔時間
stopDefault:true,//停止這個el上得默認單擊事件
handler:function(){
alert("單擊我");
}
});
//第一次單擊馬上會觸發事件 如果不去點擊其他的元素那麼3秒或就會自定執行第二次
//一或會以4秒的間隔執行相應的程序
})
（4）.Ext.util.Format 格式化的公共類
（5）.Ext.util.MixedCollection 集合類
（6）.Ext.util.TaskRunner 模擬線程控制
Ext.onReady(function(){
var runner = new Ext.util.TaskRunner();
var task = {
run:function(){
Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
},
interval:1000
}
runner.start(task);
Ext.get("b6").on("click",function(){
runner.stop(task);
})
})
1. extjs4.0對原生javaScript功能進行了擴展（API中的Utilities模塊中的NativeExtensions）
Utilities：常用的一些工具處理類
Native Extensions
Ext.Array
Ext.Number
Ext.Object
Ext.String
Ext.JSON
Ext.Date
Ext.Function
具體擴展了那些，請參照具體的API說明，擴展的原理eg：
var Person = {name:'yfc',age:26};
//alert(Person['name']);
//extjs4.0提供getKey的函數
//alert(Ext.Object.getKey(Person,'yfc'));
Object.prototype.getValue = function(key,defValue){
if(this[key]){
return this[key];
}else{
return defValue;
}
}
alert(Person.getValue("email","[email protected]"));
//由於給Object的原型加上了一個getValue的函數，這樣所有的對象（都繼承Object）默認都會擁有這個函數。
2. 事件機制與新特性
（1）給對象加事件：
Ext.get("元素ID").on("click",function(){
//函數處理部分
});
（2）新特性：create與define（extend 、requires、config、mixins、alias以及statics ）。
- create：在ExtJs4.0中你可以通過new方式也可以用create的方式得到一個對象的實例，在4.0版本中建議用create的方式來創建實例，這樣ExtJS會對創建的實例進行統一管理。
//create第一個參數爲類路徑，第二個參數爲該類的一些初始化參數值（以對象的形式傳遞）
var win = Ext.create('Ext.window.Window',{
width:400,
height:300,
title:'uspcat'
});
win.show();
- alias：別名的作用，可以把一個對象的內部函數暴漏處理啊，給其他對象直接調用。eg：
var o = {
say : function(){
alert(11111);
}
}
//通過o.say()調用函數
var fn = Ext.Function.alias(o,'say');
fn();//通過別名的方式我們就可以直接調用fn()等於o.say()。
- define：是用來定義一個類的，eg：
//create第一個參數是類的全路徑，第二個參數則是類的內容
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
title: 'Window',
closeAction: 'hide',
width: 380,
height: 300,
resizable: false,
modal: true,
//定義一些自己的擴展參數
myTitile: 'myWindow',
setTitle: function(){
this.title = this.myTitle;
}
//初始化的方法(類似java中的構造方法)
initComponent: function(){
this.setTitle();
this.callParent(arguments);
}
});
var win = Ext.create('Bmsys.ml.Window',{
titile: 'youWindow';
}
);
win.show();//此時創建出來窗體的標題是myWindow，說明創建時，傳入的初始化參數比構造器先執行。
注意：屬性只能在define時定義，不能通過win.myHeight = function(){...}添加屬性。
- requires: JS的異步加載（按需加載），解決了網絡js文件大而造成頁面打開慢得問題，只有當成需要用到這個類時Ext纔去到後臺加載包含這個類的js文件；在這裏就要，要求我們在寫js類的時候要儘量的模塊化，一個類就是一個js文件，而且類名與js文件名一致，命名空間定義規範。
//這時候要啓用自動加載
Ext.Loader.setConfig({
enabled:true,
paths:{
myApp:'js/Bmsys/ml' //js文件相對路徑，需要與命名空間保持一致
}
});
//這時候只要保證Window.js放在js/Bmsys/ml這個目錄下命名空間爲Bmsys.ml.Window就可以了。
//這時就不需要在JSP文件中引入Window.js,等到下面的程序被執行時，纔會根據命名空間去到後臺加載Window.js。
//原理就是通過命名空間與文件路徑，拼接好後通過寫入<script>標籤的方式加載。
var win = Ext.create('Bmsys.ml.Window',{
titile: 'youWindow',
requires: ['Bmsys.ml.Window']
}
).show();
- config: 這個屬性就是把你定義類的屬性自動的加上get、set方法，省去自己去寫的麻煩事。
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
title: 'Window',
width: 380,
height: 300,
//定義一些自己的擴展參數
myTitile: 'myWindow',
config: {
myHeight : 800
}
});var win = Ext.create('Bmsys.ml.Window',{});
alert(win.getMyTitle());//報錯，沒有定義getMyTitle函數
alert(win.getMyHeight());//正常彈出值爲800//放在config裏面定義的屬性，Ext會自動給這個屬性加上get、set方法。
- mixins：類的混合（多繼承實現），因爲我們在用define定義類的時候，extend只能繼承一個類。爲了擁有其它類定義好的方法及功能，我們可以通過類的混合來實現。
Ext.define("say",{
cansay:function(){
alert("hello");
}
})
Ext.define("sing",{
sing:function(){
alert("sing hello 123");
}
})//通過類的混合，就可以輕鬆擁有上面兩個類裏面的函數。
Ext.define('user',{
mixins :{
say : 'say',
sing: 'sing'
}
});var u = Ext.create("user",{});
u.cansay();//say類裏面的方法
u.sing();//sing類裏面的方法- static：類似java中靜態，我們可以定義一些靜態的屬性以及方法，通過類名'.'的方式來訪問。
Ext.define('Computer', {
statics: {
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this(brand);
}
},
constructor: function() { ... }
});
//直接通過類名'.'的方式訪問靜態方法
var dellComputer = Computer.factory('Dell');3. 數據模型model（MVC中的M層）數據模型對真實世界中對事物在系統中的抽象，extjs4.0中的mode相當於DB中的table 或 JAVA 中的Class。（1）model的幾種創建以及實例的方法。//我們利用Ext.define來創建我們的模型類
//DB table person(name,age,email)
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
]
});
//定義的時候，不需要每次寫extend:"Ext.data.Model"
Ext.regModel("user",{
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
]
});
//實例化我們的person類
//1.new關鍵字
var p = new person({
name:'uspcat.com',
age:26,
email:'[email protected]'
});
//alert(p.get('name'));
var p1 = Ext.create("person",{
name:'uspcat.com',
age:26,
email:'[email protected]'
});
//alert(p1.get('age'));
var p2 = Ext.ModelMgr.create({
name:'uspcat.com',
age:26,
email:'[email protected]'
},'person');
alert(p2.get('email'));//實例不能直接通過getName得到類名，因爲這個方法是類的 class object.getClass.getName
//alert(p2.getName());//通過類.getName可以獲得類名，因爲person是模型類的定義，而不是實例
（2）model模型Validations以及通過修改原始類來實現自定義驗證器。
alert(person.getName());//在校驗之前，修改原始類裏屬性的默認值
Ext.data.validations.lengthMessage = "錯誤的長度";Ext.onReady(function(){
//通過apply方法來在原始的校驗器類上擴展我們自定義驗證機制的的一個新的驗證方法
Ext.apply(Ext.data.validations,{
//自定義的校驗類型函數
age:function(config, value){
var min = config.min;
var max = config.max;
if(min <= value && value<=max){
return true;
}else{
this.ageMessage = this.ageMessage+"他的範圍應該是["+min+"~"+max+"]";
return false;
}
},
ageMessage:'age數據出現的了錯誤'
});
//定義一個帶有校驗的模型類
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
],
validations:[
//type的值就是Ext.data.validations裏方法名稱
//field是你要校驗字段名
//field後面的參數就是名稱等於type值的函數的參數。
{type:"length",field:"name",min:2,max:6},
{type:'age',field:"age",min:0,max:150}
]
});
var p1 = Ext.create("person",{
name:'uspcat.com',
age:-26,
email:'[email protected]'
});
//通過validate()可以得到數據校驗的錯誤集合
//每個error裏面含有兩個屬性(field---校驗字段的名,message---校驗函數返回的錯誤信息)
var errors = p1.validate();
var errorInfo = [];
errors.each(function(v){
errorInfo.push(v.field+" "+v.message);
});
alert(errorInfo.join("\n"));
});注意：自定義的校驗器，你可以通過利用apply方法來爲原始的類增加，也可以通過繼承的方式實現。（3）數據代理proxy：就是通過與後臺的交互來完成數據模型，數據填充的服務類。Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
],
//通過代理從後臺獲取數據（數據要與model的fields裏面的字段相對應）
proxy:{
type:'ajax',
url:'person.jsp'
}
});
var p = Ext.ModelManager.getModel("person");
//通過load方法來觸發proxy加載數據
p.load(1, {
scope: this,
//record.data就是加載進來的一個數據實例對象
success: function(record, operation) {
alert(record.data.name)
}
});（4）Molde的一對多和多對一關係。//類老師
Ext.regModel("teacher",{
fideld:[
{name:'teacherId',type:"int"},
{name:'name',type:"auto"}
],
//建立老師與學生的1對多關係
hasMany:{
//所關聯的模型
model: 'student',
name : 'getStudent',
//關係字段
filterProperty: 'teacher_Id'
}
});
//學生
Ext.regModel("student",{
fideld:[
{name:'studentId',type:"int"},
{name:'name',type:"auto"},
{name:"teacher_Id",type:'int'}
]
});
//假設t是老師的一個實例，就可以通過t.students 得到子類student的一個store數據集合3. 數據代理Proxy數據代理proxy是進行數據讀寫的主要途徑,通過代理操作數據進行CRUD。CRUD的 每一步操作都會得到唯一的Ext.data.Operation實例，它包含了所有的請求參數。通過構造Ext.data.Operation來傳入請求參數。（1）數據代理proxy目錄結構Ext.data.proxy.Proxy 代理類的根類(它分爲客戶端(Client)代理和服務器代理(Server))A、Ext.data.proxy.Client 客戶端代理Ext.data.proxy.Memory 普通的內存代理。Ext.data.proxy.WebStorage 瀏覽器客戶端存儲代理（cookie操作）。Ext.data.proxy.SessionStorage 瀏覽器級別代理，瀏覽器關閉數據消失。Ext.data.proxy.LocalStorage 本地化的級別代理，數據可以保存在瀏覽器文件裏，瀏覽器關閉後，下次打開還在(不能誇瀏覽器)。B、Ext.data.proxy.Server 服務器端代理Ext.data.proxy.Ajax 異步加載的方式。Ext.data.proxy.Rest 一種特使的Ajax。Ext.data.proxy.JsonP 跨域交互的代理（請求的數據url不在同域內）， 跨域是有嚴重的安全隱患的，extjs的跨域也是需要服務器端坐相應的配合。Ext.data.proxy.Direct 命令.4. 工作在Proxy下的讀寫器（1）Reader : 主要用於將proxy數據代理讀取的數據按照不同的規則進行解析,講解析好的數據保存到Model中結構圖Ext.data.reader.Reader 讀取器的根類Ext.data.reader.Json JSON格式的讀取器Ext.data.reader.Array 擴展JSON的Array讀取器Ext.data.reader.Xml XML格式的讀取器var userData = {
//讀寫器默認讀取的記錄總數的屬性
//total : 200,
//採用我們自定義的變量來標識總條數，這時後需要在讀寫器中配置total所對應我們自定義的變量
count:250,
user:[{auditor:'yunfengcheng',info:{
userID:'1',
name:'uspcat.com',
orders:[
{id:'001',name:'pen'},
{id:'002',name:'book'}
]
}}]
};
//model
Ext.regModel("user",{
fields:[
{name:'userID',type:'string'},
{name:'name',type:'string'}
],
//配置一對多的關係
hasMany: {model: 'order'}
});
Ext.regModel("order",{
fields:[
{name:'id',type:'string'},
{name:'name',type:'string'}
],
//配置多對一的關係
belongsTo: {type: 'belongsTo', model: 'user'}
});
var mproxy = Ext.create("Ext.data.proxy.Memory",{
model:'user',
data:userData,
//讀寫時的參數配置
reader:{
type:'json',//讀取的類型（json/xml/array）
root:'user',//指定讀取開始的根節點
implicitIncludes:true,//是否級聯讀取關聯的子節點（一對多的關係中體現）
totalProperty:'count',//配置我們返回的總條數變量名稱
record : 'info'//服務器返回的數據可能很複雜,用record可以篩選出有用的數據信息,裝在帶Model中，其它的參數忽略。
}
});
//用內存代理來讀取數據，其它的方式一樣
mproxy.read(new Ext.data.Operation(),function(result){
var datas = result.resultSet.records;
alert(result.resultSet.total);
Ext.Array.each(datas,function(model){
alert(model.get('name'));
});
var user = result.resultSet.records[0];
var orders = user.orders();
orders.each(function(order){
alert(order.get('name'))
});
})（2）Writer ：把前臺的js對象數據按照不同的方式寫到後臺。結構圖Ext.data.writer.WriterExt.data.writer.Json 對象被解釋成JSON的形式傳到後臺Ext.data.writer.Xml 對象被解釋成XML的形式傳到後臺Ext.regModel("person",{
fields:[
'name','age'
],
proxy :{//在proxy下，你可以配置reader（讀），同樣也可以配置writer（寫）
type:'ajax',
url:'person.jsp',
writer:{//配置一些寫的參數
//type:'json'
type:'xml' //把js對象以xml的方式，傳入後臺
}
}
});
Ext.ModelMgr.create({
name:'uspcat.con',
age:1
},'person').save();5. Store : 是一個存儲數據對象Model的集合緩存,它可以爲extjs中的可視化組建提供數據源 (GridPanel,ComboBox)等。（在ExtJS中佔有重要的地位，它也屬於Model層）
（1）類結構Ext.data.AbstractStoreExt.data.Store 沒有特殊情況這個類就可以滿日常的開發了Ext.data.ArrayStoreExt.data.DirectStoreExt.data.ArrayStore 內置輔助的類Ext.data.JsonStroe 內置輔助的類Ext.data.TreeStore（2）Ext.data.Store 使用參數autoLoad(Boolean/Object) ： 自動加載數據，自動調用loaddata(Array) ： 內置數據對象的數組，初始化的是就要被裝在model(Model) ： 數據集合相關的模型fields(Field) ：字段的集合，程序會自動生成對於的Model，這樣我們就不需要再定義model。方法each( Function f, [Object scope] ) : void 變量數據中的ModelExt.define("person",{
extend:'Ext.data.Model',
fields:[
{name:'name'},
{name:'age'}
],
proxy:{
type:'memory'
}
})
var s = new Ext.data.Store({
//model:'person',
data:[
{name:'uspcat.com',age:1},
{name:'yfc',age:26}
],
//有了fields，我們就不需要在單獨定義Model並且引用
fields:[
{name:'name'},
{name:'age'}
],
//通過data屬性，請偶們已經能夠把數據初始化好了
//proxy是動態的區後臺去數據
//proxy:{
// type:'ajax',
// url:'person.jsp'
//}
//autoLoad:true
});
s.load(function(records, operation, success){
//遍歷
Ext.Array.each(records,function(model){
alert(model.get('name'));
});
//過濾出字段name='yfc'
s.filter('name',"yfc");
s.each(function(model){
alert(model.get('name'));
});
//通過正則來查找數據集裏面的記錄，返回該記錄的索引
var index = s.find('name','yfc',0,false,true,false);
alert(s.getAt(index));//當前的Model對象
});
1. 組件component : 能夠以圖形化形式呈現界面的類，其中還可以分爲容器組件與元件組件。
- 容器組件:能夠包含其它容器或者元件組件的類，其是進行單元化組件開發的基礎
- 元件組件：能圖形化形式表現一個片面功能的組件，其不僅在實現了原有傳統WEB程序的現有組件，而且還擴展了許多實用的組件，如刻度器、日曆、樹形列表等。
2. 類
提供功能的非圖形可形的類，它們爲圖形類提供了有力的支持
按其功能可分爲：數據支持類(Data)、拖放支持類（DD）、佈局支持類（layout）、本地狀態存儲支持類（state）、實用工具類（Util）。
密封類：不能被擴展的類
原型類：擴展了javascript標準類庫中的類
3. 方法
作爲類的功能體現，能夠產生改變對象本身產生變化的直接因素
方法按訪問形式可分爲公有方法與私有方法。但由於javascript從原理上根本不支持這種結構，因此在EXTJS中，私有與公有方法完全憑藉着用戶自覺，沒有像JAVA那樣的強制性。
4. 事件
由類定義的，並且可以在類對象自身狀態發生改變的觸發。
只有被定閱的事件纔會有效
如果不需要此事件，應該進行退定，增強程序的執行效率。
5. 配置選項
用以初始化一個EXTJS類對象的手段
注意，配置選項並不一定就是屬性，總算是屬性，也有可能出現屬性返回的類型與你當初指定的配置選項類型不一致的情況。
6. 屬性
能夠在程序運行期間，能夠被訪問，用以瞭解當前類對象的狀態。
在實際的編程中，EXTJS的屬性設置，比較差勁，需要通過了解其源代碼，才能瞭解各種實用屬性的用處。
7. 命名空間
能夠將編寫好的EXTJS類進行有效組織的手段。
這個也是EXTJS能夠稱之爲優秀AJAX框架的特徵之一。
網上有好多關於Grid分頁的，各種語言都有，但大部分都是一樣的，都只是講了Grid分頁的語法，很少說到如何和後臺的數據庫交互，查出數據，同樣剛接觸Extjs，希望和菜鳥級別的兄弟姐妹們，共同進步。
前臺代碼：
var itemsPerPage = 2;
var store = Ext.create('Ext.data.Store', {
autoLoad: { start: 0, limit: itemsPerPage },
fields: ['AA001', 'AA002', 'AA003', 'AA004', 'AA005', 'AA006', 'AA007'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'HandlerFun.ashx?Type=Support',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
}
});
var gridHeight = document.body.clientHeight * 19;
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel', 'selection.checkboxmodel');
var grid = Ext.create('Ext.grid.Panel', {
title: '',
renderTo: "grid",
autoWidth: true,
height: gridHeight,
frame: true,
store: store,
multiSelect: false,
selModel: { selType: 'checkboxmodel' }, //在首列實現checkbox，僅此在首列
columns: [
{ header: '單據類別', width: 100, dataIndex: 'AA001', sortable: true },
{ header: '單據號碼', width: 150, dataIndex: 'AA002', sortable: true },
{ header: '單據日期', width: 80, dataIndex: 'AA003', sortable: true },
{ header: '客戶編號', width: 80, dataIndex: 'AA004', sortable: true },
{ header: '客戶分類', width: 80, dataIndex: 'AA005' },
{ header: '聯絡人', width: 80, dataIndex: 'AA006' }
{ header: '電話號碼', width: 80, dataIndex: 'AA007' }
],
bbar: [
{
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}
]
});
store.load({ params: { start: 0, limit: 2} });
後臺:
分頁原來和以前其他的分頁原理都是一樣的，就是當前是第幾頁，然後每一頁顯示多少條記錄，到數據庫中取出來，然後show出來就Ok了！
因為是.net ，在在.ashx文件中，獲取 start 和limit，有人說start是頁，limit是此頁的數目，其實
，int page代表是頁數，page=start/limit+1 //獲取第幾頁
int beginShowCount ,showCount=page*limit-limit+1; //這是當前頁數的 起始位置
int endShowCount ,endShowCount=page*limit； //這是當前頁的 結束位置
表達可能不好，解釋一下起始位置，假如每頁顯示2條記錄，那就應該讀兩套記錄。那第一頁就是從第一條記錄到第二條記錄，起始就是第一條記錄，結束就是第二條記錄。
數據庫語句 select * from (select row_number() over (order by AA001) as ID,* from dbo.RegalAA) as b where ID between 1 and 5
把 1 換成 beginShowCount ,5換成 endShowCount就可以了，
JSON對象
private string Dtb2Json(DataTable dtb, int total)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
string str = jss.Serialize(dic);
return "{" + "\"total\":" + total + ",\"rows\":" + str + "}";
// return str;
}
這裡的total是整個所有的記錄的總和哦！在前臺totalProerty那不能寫錯！
後臺代碼：
//當前是第幾頁
string start = context.Request["start"];
int currentpage = int.Parse(start);
//每一頁顯示的數目
string limit = context.Request["limit"];
int pagetotal = int.Parse(limit);
DataTable dt = BLL.GetDataToGridSupport(currentpage,pagetotal);//獲取喲顯示的記錄
DataTable dttotal = BLL.GetDataToGridSupport();//獲取總記錄數
int total = dttotal.Rows.Count;//獲取總記錄數
context.Response.Write(Dtb2Json(dt, total));
希望Ext的表格能自適應外層的div大小，但Ext的Grid構造函數的width、height項不支持100%的設置方式，所以改用以下方式初始化Grid：
width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),
<div id="content">
<div id="grid-example"></div>
<div>
#content {
width: 100%;
height: 100%;
}
完整js代碼：
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'id',header: "序號", width: 50, sortable: true, renderer: keyChange, dataIndex: 'id'},
{header: "數據表表名", width: 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'},
{header: "物理表名", width: 100, sortable: true, dataIndex: 'tableName'},
{header: "類型", width: 75, sortable: true, dataIndex: 'type'}
],
stripeRows: true,
width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),
addClass:"grid",
tbar: [{
text: '新增模版',
handler : function(){
window.location.href = 'templateDefineList4.html';
}
},{
text: '刪除模版',
handler : function(){
}
}],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: store,
displayInfo: true,
displayMsg: '當前顯示記錄 {0} - {1} 總條數 {2}',
emptyMsg: '無記錄'
})
});
Ext4.0 自帶的Ext.ux.RowEditing還不夠完善,隨手寫個ux來用下,
v1.4 2011-09-12 變更內容:
1.重構,修復不少bug以及合併/新增一些配置項(具體看附件中的文檔)
2.支持jsduck生成文檔 (https://github.com/senchalabs/jsduck)
v1.0 2011.04.27 變更內容:
1.增加canceledit事件
2.增加startAdd方法,方便crud表格的添加操作
3.添加點擊取消按鈕後,自動重置或刪除記錄的功能
v1.1 2011.05.03 變更內容:
1.startAdd方法增加position參數,修復autoSync設值的bug
2.配置參數removePhantomsOnCancel改名爲autoRecoverOnCancel
3.startEdit前先調用cancelEdit函數,以便正確的恢復現場
v1.2 2011.05.04 變更內容:
1.包名改爲Ext.ux.grid.plugin
2.添加配置參數hideTooltipOnAdd
3.判斷是否刪除新增記錄的邏輯優化
4.代碼風格等方面的改進
v1.3 2011.05.22 變更內容:
1. 設置clicksToEdit爲0,可取消雙擊/單擊事件觸發編輯
2. 提供field默認配置,只需給column添加一個fieldType
- {
- text: 'Enable',
- dataIndex: 'enable',
- width: 80,
- renderer: function(v){return v?'Enable':'Disable'},
- fieldType: 'checkboxfield',
- field: {
- boxLabel: 'Enable'
- }
- }
代碼如下:
- /**
- * @class Ext.ux.grid.plugin.RowEditing
- * @extends Ext.grid.plugin.RowEditing
- * @xtype ux.rowediting
- *
- * 對Ext原有的RowEditing插件增加新功能.<br/>
- * Improve Ext.ux.grid.plugin.RowEditing,add some usefull features.<br/>
- *
- * @author tz <[email protected]> <br/>
- * @date 2011-08-20 <br/>
- * @version 1.4 <br/>
- * @blog http://atian25.iteye.com <br/>
- * @forum http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features<br/>
- *
- */
- Ext.define('Ext.ux.grid.plugin.RowEditing', {
- extend: 'Ext.grid.plugin.RowEditing',
- alias: 'plugin.ux.rowediting',
- /**
- * 是否添加記錄在當前位置<br/>
- * whether add record at current rowIndex.<br/>
- * see {@link #cfg-addPosition}
- * @cfg {Boolean}
- */
- addInPlace: false,
- /**
- * 添加記錄的具體位置 <br/>
- * * 當addInPlace爲true時,該參數<=0代表當前位置之前,否則代表當前位置之後<br/>
- * * 當addInPlace爲false時,代表具體的rowIndex,-1則爲最後<br/>
- * Special rowIndex of added record.<br/>
- * * when {@link #cfg-addInPlace} is true, this cfg means before(<=0) or after(>0) current rowIndex.<br/>
- * * when {@link #cfg-addInPlace} is false, this cfg means the exact rowIndex.-1 means at the end.
- * @cfg {Number}
- */
- addPosition: 0,
- /**
- * 是否點擊觸發事件,0代表不觸發,1代表單擊,2代表雙擊,默認爲雙擊.<br/>
- * The number of clicks on a grid required to display the editor (disable:0,click:1,dblclick:2)
- * @cfg {Number}
- */
- clicksToEdit:2,
- /**
- * 是否在取消編輯的時候自動刪除添加的記錄
- * if true, auto remove phantom record on cancel,default is true.
- * @cfg {Boolean}
- */
- autoRecoverOnCancel: true,
- /**
- * adding flag
- * @private
- * @type Boolean
- */
- adding: false,
- autoCancel:true,
- /**
- * when add record, hide error tooltip for the first time
- * @private
- * @type Boolean
- */
- hideTooltipOnAdd: true,
- /**
- * register canceledit event && relay canceledit event to grid
- * @param {Ext.grid.Panel} grid
- * @override
- * @private
- */
- init:function(grid){
- var me = this;
- /**
- * 取消編輯事件.<br/>
- * Fires canceledit event.And will be relayEvents to Grid.<br/>
- * @see {@link Ext.ux.grid.RowActions#event-beforeaction} <br/>
- * @event canceledit
- * @param {Object} context
- */
- me.addEvents('canceledit');
- me.callParent(arguments);
- grid.addEvents('canceledit');
- grid.relayEvents(me, ['canceledit']);
- },
- /**
- * 提供默認的Editor配置
- * @example
- * {header:'手機',dataIndex:'phone',fieldType:'numberfield',field:{allowBlank:true}}
- * provide default field config
- * @param {String} fieldType 可選值:numberfield,checkboxfield,passwordField
- * @return {Object}
- * @protected
- */
- getFieldCfg: function(fieldType){
- switch(fieldType){
- case 'passwordField':
- return {
- xtype: 'textfield',
- inputType: 'password',
- allowBlank:false
- }
- case 'numberfield':
- return {
- xtype: 'numberfield',
- hideTrigger: true,
- keyNavEnabled: false,
- mouseWheelEnabled: false,
- allowBlank:false
- }
- case 'checkboxfield':
- return {
- xtype: 'checkboxfield',
- inputValue: 'true',
- uncheckedValue: 'false'
- }
- }
- },
- /**
- * Help to config field,just giving a fieldType and field as additional cfg.
- * see {@link #getFieldCfg}
- * @private
- * @override
- */
- getEditor: function() {
- var me = this;
- if (!me.editor) {
- Ext.each(me.grid.headerCt.getGridColumns(),function(item,index,allItems){
- if(item.fieldType){
- item.field = Ext.applyIf(item.field||{},this.getFieldCfg(item.fieldType))
- }
- },this)
- // keep a reference for custom editor..
- me.editor = me.initEditor();
- }
- me.editor.editingPlugin = me
- return me.editor;
- },
- /**
- * if clicksToEdit===0 then mun the click/dblclick event
- * @private
- * @override
- */
- initEditTriggers: function(){
- var me = this
- var clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'
- me.callParent(arguments);
- if(me.clicksToEdit === 0){
- me.mun(me.view, 'cell' + clickEvent, me.startEditByClick, me);
- }
- },
- /**
- * 添加記錄
- * add a record and start edit it (will not sync store)
- * @param {Model/Object} data Data to initialize the Model's fields with <br/>
- * @param {Object} config see {@link #cfg-addPosition}.
- */
- startAdd: function(data,config){
- var me = this;
- var cfg = Ext.apply({
- addInPlace: this.addInPlace,
- addPosition: this.addPosition,
- colIndex: 0
- },config)
- //find the position
- var position;
- if(cfg.addInPlace){
- var selected = me.grid.getSelectionModel().getSelection()
- if(selected && selected.length>0){
- position = me.grid.store.indexOf(selected[0])
- console.log('a',position)
- position += (cfg.addPosition<=0) ? 0: 1
- }else{
- position = 0
- }
- }else{
- position = (cfg.addPosition==-1 ? me.grid.store.getCount() : cfg.addPosition) || 0
- }
- var record = data.isModel ? data : me.grid.store.model.create(data);
- var autoSync = me.grid.store.autoSync;
- me.grid.store.autoSync = false;
- me.grid.store.insert(position, record);
- me.grid.store.autoSync = autoSync;
- me.adding = true
- me.startEdit(position,cfg.colIndex);
- //since autoCancel:true dont work for me
- if(me.hideTooltipOnAdd && me.getEditor().hideToolTip){
- me.getEditor().hideToolTip()
- }
- },
- /**
- * 編輯之前,自動取消編輯
- * Modify: if is editing, cancel first.
- * @private
- * @override
- */
- startEdit: function(record, columnHeader) {
- var me = this;
- if(me.editing){
- me.cancelEdit();
- }
- me.callParent(arguments);
- },
- /**
- * 修改adding的狀態值
- * Modify: set adding=false
- * @private
- * @override
- */
- completeEdit: function() {
- var me = this;
- if (me.editing && me.validateEdit()) {
- me.editing = false;
- me.fireEvent('edit', me.context);
- }
- me.adding = false
- },
- /**
- * 取消編輯
- * 1.fireEvent 'canceledit'
- * 2.when autoRecoverOnCancel is true, if record is phantom then remove it
- * @private
- * @override
- */
- cancelEdit: function(){
- var me = this;
- if (me.editing) {
- me.getEditor().cancelEdit();
- me.editing = false;
- me.fireEvent('canceledit', me.context);
- if (me.autoRecoverOnCancel){
- if(me.adding){
- me.context.record.store.remove(me.context.record);
- me.adding = false
- }else{
- //不需要reject,因爲Editor沒有更改record.
- //me.context.record.reject()
- }
- }
- }
- }
- })
- //ext-lang-zh_CN
- if (Ext.grid.RowEditor) {
- Ext.apply(Ext.grid.RowEditor.prototype, {
- saveBtnText: '保存',
- cancelBtnText: '取消',
- errorsText: '錯誤信息',
- dirtyText: '已修改,你需要提交或取消變更'
- });
- }
-
var textfieldName = new Ext.form.TextField
({
id:"textfieldName",
allowBlank:false,//默認是true,如果是false,就是不允許空
//假如不爲空時，定義提示信息 默認的提示信息是：This field is required
//要使提示內容出現，需要添加 Ext.QuickTips.init();
blankText:"請輸入數據",
disabled:false,//默認是false
emptyText:"請正確輸入數據",//默認是null
fieldLabel:"用戶名稱",//默認是""
height:"auto",//默認是auto
hidden:false,//默認是false
hideLabel:false,//默認是false
hideMode:"offsets",//默認display,可以取值：display，offsets，visibility
inputType:"text",//輸入類型 這個很重要，可以是radio, text, password, file 默認是text
invalidText:"invalidText：只能夠輸入數字",//默認是：The value in this field is invalid
maxLength:100,//能夠輸入的內容的最大長度
maxLengthText:"輸入內容太長了",//超出最大長度的設置信息
minLength:2,//能夠輸入的內容的最小長度
maxLengthText:"輸入內容太短了",//沒有達到最小長度的設置信息
readOnly:false,//內容是否只讀，默認false
regex:/^\d$/, //正則表達式 這裏假設只允許輸入數字 如果輸入的不是數字 就會出現下面定義的提示信息
regexText:"regexText：只能夠輸入數字", //定義不符合正則表達式的提示信息
validateOnBlur:true,//默認是true,失去焦點時驗證
validationDelay:300,//默認是250,驗證延遲時間,毫秒數
validationEvent:"click", //驗證事件 默認是keyup 可以是String/Boolean
//自定義的驗證函數 當輸入的數據不符合正則表達式的要求時，就會執行這個函數
validator:function(){Ext.Msg.alert("提示信息","只能夠輸入數字");},
value:"",//自定義的信息 默認是：undefined
//x:number,y:number,在容器中的x,y座標
width:"auto",//默認是auto
renderTo:"Bind_TextField"
});
給grid添加RowEditing:
[javascript]
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
autoCancel: false,
clicksToEdit:2<span style="white-space:pre"> </span>//雙擊進行修改
})
然後在grid裏面配置即可：
[javascript]
plugins: [
rowEditing
],
1、增加：
給“增加”添加點擊事件，點擊時，在store中添加一個新的record，並調用startEdit(0,0)方法，參數表示編輯第一行，也就是剛添加的新行
[javascript]
'center button[id = addContact]':{
click:function(){
//得到通訊錄的store，並添加一個新的空行
var contactStore = Ext.getStore('ContactStore');
var contactModel = Ext.create('MS.model.Contact',{});
contactStore.insert(0,contactModel);
//得到rowEditing添加事件
var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
rowEditing.startEdit(0,0);
}
},
然後在輸入信息即可
2、修改：
當點擊“修改”時，找到選擇的列，或者雙擊某列時進行修改
[javascript]
'center button[id = updateContact]':{
click:function(){
//得到rowEditing添加事件
var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
var data = Ext.getCmp("contactGridpanel").getSelectionModel().getSelection();
if(data.length == 0) {
Ext.MessageBox.alert(
'提示',
'請在您要修改的行前面打勾，或者直接雙擊您想修改的行！'
);
}else{
rowEditing.startEdit(data[0].index,0);
}
}
},
3、保存
不管是添加還是修改，保存用的事件是grid的edit事件
[javascript]
edit:function(editor,e,eOpts){
// "添加" 當id爲空時，表示添加新的聯繫人
if(id == ''){
//執行操作
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在添加，請稍後...',
removeMask: true //完成後移除
});
myMask.show();
//獲取uuid
var id = UUID.prototype.createUUID();
//獲取record
var formData = e.record.getData();
Ext.Ajax.request({
url: 'add',
params: {
id:id
//參數
},
success: function(response){
var result = Ext.decode(response.responseText).result;
if(result.succeed){
e.record.set(id,uuid);
//頁面效果，提交數據
e.record.commit();
//重新排序，防止出現錯位現象
Ext.getStore('ContactStore').sort('id', 'DESC');
//隱藏等待提示框
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}else{
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
}
});
}else{
// "修改" 當id不爲空時，表示修改聯繫人信息
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在修改，請稍後...',
removeMask: true //完成後移除
});
myMask.show();
var formData = e.record.getData();
Ext.Ajax.request({
url: 'update',
params: {
id:formData.id
},
success: function(response){
var result = Ext.decode(response.responseText).result;
if(result.succeed){
e.record.commit();
Ext.getStore('ContactStore').sort('id', 'DESC');
//隱藏
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}else{
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
}
})
}
}
}
var mk = new Ext.LoadMask(tree.id, {
msg: '正在更新數據，請稍候！',
removeMask: true //完成後移除
});
mk.show(); //顯示
Ext.Ajax.request({
url: 'roleAction.evi', // 發送get請求.
method: 'GET',
success: function() {
mk.hide(); //關閉
},
failure: function() { mk.hide(); }
});
var waitMask = new Ext.LoadMask(Ext.getBody(), { msg: "系統正在處理數據，請稍候..." }); //定義一個
waitMask.show();//show方法顯示
btnGenerate.disable();
Ext.Ajax.request(
{
method: 'POST',
url: Vars.Url,
success: function(response) {
//轉成對象
var obj = Ext.decode(response.responseText);
if (obj.success) {
Twi.Msg.Info(null, "原始記錄單生成成功！");
}
else {
Twi.Msg.Info('操作失敗', obj.message);
}
btnGenerate.enable();
waitMask.hide(); //hide()方法隱藏
},
failure: function(response, action) {
Twi.Msg.Error(null, '提交失敗,系統發生異常，異常類別爲：' + action.failureType);
btnGenerate.enable();
waitMask.hide();//隱藏
},
params:
{
sign: 'GenerateOriginalList',
MgscType: Vars.MgscType,
TaskID: Vars.TaskID,
TestItemID: Vars.TestItemID
}
});
Grid是Ext框架中一個重要的組成部分。一般建立Grid主要實現數據的增刪改查。
建立一個Grid
Grid一般有三個主要的內容，ds,cm,GridPanel
var ds = new Ext.data.Store();
var cm = new Ext.grid.ColumnModel();
var grid = new Ext.grid.GridPanel();
如果要頁面載入時，Grid不顯示，事件觸發查詢並建立Grid顯示。很簡單，將GridPanel建立在事件的function中就可以了。
如果載入時就顯示Grid,這裏分幾種情況:
(1)頁面載入時，Grid顯示，並查詢和顯示出數據。
(2)頁面載入時，Grid顯示，但不發送請求數據，事件觸發查詢。該查詢條件已固定或不需要條件。
(3)頁面載入時，Grid顯示，不查詢數據，事件觸發查詢，該查詢需要從頁面上存在的文本框中獲得數據作爲條件。
(4)與(3)相同，但是希望在Grid查詢過程中有loadMask效果。
對於1）
直接在Ext.onReady()中建立GridPanel，並且ds調用load方法。
對於2）
在Ext.onReady()中建立GridPanel,而在事件的function中寫ds.load()
對於3)
在Ext.onReady()中建立GridPanel,而此時的ds爲一個假ds,它的作用僅僅是爲了能夠在頁面載入時就顯示Grid,而在事件的function中
則再建立一個帶有查詢條件的ds,然後用該ds重新配置Grid.grid.reconfigure(ds,cm);
對於4)
查詢的要求可由grid被新的ds重新配置的方法實現，但是會發現，這樣做時，Grid的loadMask效果也不會出現了。有一個方法，就是在事件的
function中，將Grid的render的div清空，即div.innerHTML="" 之後再重新建立一個Grid。這樣做的缺點就是會在有很多代碼重複。
可能還會出現一些其他的function的調用以及無法取得某對象的問題。
以下由第三種情況爲例，來說明增刪改查。
建立：
var fds = new Ext.data.Store();
var cm = new Ext.grid.ColumnModel([
{header:'例子',width:100,dataIndex:'test',
editor:new Ext.form.TextField({
id:'test'
})
}
]);
var sm = new Ext.grid.RowSelectionModel();
var grid = new Ext.grid.EditorGridPanel({
ds:fds,
cm:cm,
sm:sm,
width:200,
height:200,
title:'舉例',
renderTo:Ext.get("testdiv")
});
這裏建立EditorGridPanel，是可以進行編輯的Grid.
1 查詢：(點擊按鈕觸發事件)
function btnclick()
{
var Record = Ext.data.Record.create([
{name:'test'}
]); //此處將record單獨提出方便操作
var ds = new Ext.data.Store({
url:'訪問的地址',
reader:new Ext.data.XmlReader({
record:'item'
},Record)
});
ds.load();
grid.reconfigure(ds,cm);
}
2 添加
新建一條數據
var r = new Record({
test:'隨便舉個例子'
});
插入到表格指定行，n爲要插到這行後（此處取了表格的行數，即插入到最後），m是編輯完畢後focus的位置列數
var n = grid.getStore().getCount();
grid.stopEditing();
grid.getStore().insert(n,r);
grid.startEditing(n,m);
3 刪除
刪除選定的行
var r = grid.getSelectionModel().getSelected();
ds.remove(r);
刪除多行，也一樣，用getSelections()反法取到選中的行的一個數組，然後再一一刪除。
刪除所有行
ds.removeAll();
4 修改
兩種方法，一種直接手動點擊需要修改的單元格，EditorGridPanell中的ClicksToEdit來設置點擊幾下進入編輯狀態。
還有一種從別處獲得數據自動修改。
假設一條新的數據，
var nr = ['修改後的例子'];
選定你要修改的行
var recordtoedit = grid.getSelectionModel().getSelected();
或者var recordtoedit = ds.getAt(rowIndex);
recordtoedit.set('test','修改後的例子');
還可以在修改完畢後將修改過的行的顏色改變來標示出哪一條是修改過的。
添加事件
grid.on('afteredit',function(e){
var rowIndex = e.row;
grid.getView().getRow(rowIndex).style.backgroundColor="red";
//可以增加透明度效果
grid.getView().getRow(number).style.filter = "alpha(opacity=50)";
grid.getView().getRow(number).style.MozOpacity =".5";
});