ExtJS學習筆記
阿新 • • 發佈：2019-01-12
必殺技 -> Ext.MessageBox.alert("hello","Hello,easyjf open source");
1. window控制元件
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello"> </div>
2. render 方法後面的引數表示頁面上的div 元素id，也可以直接在引數中通過renderTo 參
數來省略手動讞用render 方法，只需要在建構函式的引數中新增一個renderTo 屬性即可，
3. tab panel
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
4. 配置一個面板：
new Ext.Panel({
title:"面板",
html"面板內容",
height:100}
);
再比如建立一個按鈕：
var b=new Ext.Button({
text:"新增",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
再比如建立一個Viewport 及其中的內容：
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板內容",
height:100},
{region:"center",
xtype:"grid",
title:"學生資訊管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});
5. 事件處理
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
6. addLinster 方法的另外一個簡寫形式是on
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
由於在呼叫addListener 的時候傳遞指定的delay 為2000，因此當用戶點選按鈕的時候，
不會馬上執行事件響應函式，而是在2000 毫秒，也就是兩秒後才會彈出提示資訊框。
7. 面板由以下幾個部分組成，一個頂部工具欄、一個底部工具欄、面板頭部、面板尾部、面板主區域幾個部分元件。面板類中還內建了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得我們可以輕鬆實現自定義的行為，面板可以放入其它任何容器中，面板本身是一個容器，他裡面又可以包含各種其它元件。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板頭部header",
width:300,
height:200,
html:'<h1>面板主區域</h1>',
tbar:[{text:'頂部工具欄topToolbar'}],
bbar:[{text:'底部工具欄bottomToolbar'}],
buttons:[{text:"按鈕位於footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
8.工具欄
面板中可以有工具欄，工具欄可以位於面板頂部或底部，Ext 中工具欄是由Ext.Toolbar類表示。工具欄上可以存放按鈕、文字、分隔符等內容。面板物件中內建了很多實用的工具欄，可以直接通過面板的tools 配置選項往面板頭部加入預定義的工具欄選項。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板頭部header",
width:300,
height:200,
html:'<h1>面板主區域</h1>',
tbar:[new Ext.Toolbar.TextItem('工具欄:'),
{xtype:"tbfill"},//導致新增與儲存右對齊
{pressed:true,text:'新增'},
{xtype:"tbseparator"},
{pressed:true,text:'儲存'}
],
tools:[
{id:"save"},
{
id:"help",
handler:function(){
Ext.Msg.alert('help','please help me!');
}
},
{id:"close"}
],
bbar:[{text:'底部工具欄bottomToolbar'}],
buttons:[{text:"按鈕位於footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
9. ViewPort
VeiwPort 代表整個瀏覽器顯示區域，該物件渲染到頁面的body 區域，並會隨著瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort 例項。
不需要renderTo這樣的配置項，直接顯示到body區域
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:
[
{title:"面板",
region:"north",
height:50,
html:"<h1>網站後臺管理系統!</h1>"
},
{title:"選單",
region:"west",
width:200,
collapsible:true,
html:"選單欄"
},
{
xtype:"tabpanel",
region:"center",
items:[{title:"面板1",html:"tab1"},
{title:"面板2",html:"tab2"}]
}
]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
10. 視窗
<script type="text/javascript">
var i=0;
function newWin()
{
var win=new Ext.Window({title:"視窗"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新視窗" />
</body>
11. 視窗分組操作
視窗是分組進行管理的，可以對一組視窗進行操作，預設情況下的視窗都在預設的組Ext.WindowMgr 中。視窗分組由類Ext.WindowGroup 定義，該類包括bringToFront、getActive、hideAll、sendToBack 等方法用來對分組中的視窗進行操作。
<script type="text/javascript">
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"視窗"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}
function hideAll()
{
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新視窗" />
<input id="btnToBack" type="button" name="add" value="放到後臺" />
<input id="btnHide" type="button" name="add" value="隱藏所有" />
</body>
12. 對話方塊
Ext 的對話方塊都封裝在Ext.MessageBox 類，該類還有一個簡寫形式即Ext.Msg，可以直接通過Ext.MessageBox 或Ext.Msg 來直接呼叫相應的對話方塊方法來顯示Ext 對話方塊。看下面的程式碼：
alert對話方塊
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("請注意","這是ExtJS的提示框");//Ext.Msg.alert("請注意","這是ExtJS的提示框");
});
});
</script>
</head>
<body>
<input id="btnAlert" type="button" value="alert框" />
</body>
13. 確認對話方塊，並提示點了什麼
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("請確認","真的點啦？", function(button,text){
if(button=='yes')
{
Ext.Msg.alert("好吧，你還真點了....");
}
else
{
Ext.Msg.alert("還好沒點Yes");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你點點看" />
</body>
13. prompt，輸入框，根據選擇，彈出內容
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("吐槽吧","你想吐槽點什麼？", function(button,text){
if(button=='ok')
{
Ext.Msg.alert("你說的是："+text);
}
else
{
Ext.Msg.alert("耍我呢，你點的是cancel！");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你點點看" />
</body>
14. 自定義儲存詢問
<script type="text/javascript">
function save(button)
{
if(button=="yes")
{
//執行資料儲存操作
Ext.Msg.alert("已儲存");
} else if(button=="no")
{
//不儲存資料
Ext.Msg.alert("你點選了不儲存");
} else
{
//取消當前操作
Ext.Msg.alert("操作已取消");
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'儲存資料',
msg: '你已經作了一些資料操作，是否要儲存當前內容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你點點看" />
</body>
15. 基本表格GridPanel
ExtJS 中的表格功能非常強大，包括了排序、快取、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯等實用功能。
表格由類Ext.grid.GridPanel 定義，繼承自Panel，其xtype 為grid。ExtJS 中，表格Grid必須包含列定義資訊， 並指定表格的資料儲存器Store 。表格的列資訊由類Ext.grid.ColumnModel 定義、而表格的資料儲存器由Ext.data.Store 定義，資料儲存器根據解析的資料不同分為JsonStore、SimpleStroe、GroupingStore 等。
<script type="text/javascript">
function showUrl()
{
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"專案名稱",dataIndex:"name",sortable:true},
{header:"開發團隊",dataIndex:"organization",sortable:true},
{header:"網址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:150,
width:600,
columns:[{header:"專案名稱",dataIndex:"name"},
{header:"開發團隊",dataIndex:"organization"},
{header:"網址",dataIndex:"homepage",renderer:showUrl}],
cm:colM,
store:store,
autoExpandColumn:2
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
上面的程式碼中，第一行“var data=…”用來定義表格中要顯示的資料，這是一個[][]二維陣列；第二行“var store=…”用來建立一個數據儲存，這是GridPanel 需要使用配置屬性，資料儲存器Store 負責把各種各樣的資料（如二維陣列、JSon 物件陣列、xml 文字）等轉換成ExtJS的資料記錄集Record，關於資料儲存器Store 我們將在下一章中作專門介紹。第三行“var grid= new Ext.grid.GridPanel(…)”負責建立一個表格，表格包含的列由columns 配置屬性來描述，columns 是一陣列，每一行資料元素描述表格的一列資訊，表格的列資訊包含列頭顯示文字(header)、列對應的記錄集欄位(dataIndex)、列是否可排序(sorable)、列的渲染函式(renderer)、寬度(width)、格式化資訊(format)等，在上面的列子中只用到了header 及dataIndex。
16. Ext.Viewport
一個表示程式可視區域的特殊容器（瀏覽器可視區域）。
A specialized container representing the viewable application area (the browser viewport).
視窗渲染在document的body標籤上，並且根據瀏覽器可視區域的大小自動調整並且管理視窗的大小變化。一個頁面上只允許存在一個viewport。所有的{@link Ext.Panel 面板}增加到viewport，通過她的items，或者通過她的子面板（子面板也都可以擁有自己的layout）的items，子面板的add方法，這種設計讓內部佈局的優勢非常明顯。
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.
Viewport不支援滾動，所以如果子面板需要滾動支援可以使用autoScroll配置。
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.
展示一個經典的border佈局的viewport程式示例:
Example showing a classic application border layout :
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
17. 表單案例
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表單控制元件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//設定標籤對齊方式
labelAlign: 'right',
//設定標籤寬
labelWidth: 170,
//設定按鈕的對齊方式
buttonAlign:'center',
//預設元素屬性設定
defaults:{
width:180
},
items: [{
fieldLabel: '文字框控制元件',
name: 'TextBox',
xtype: 'textfield'
//,readOnly : true //只讀
//,emptyText :'請輸入資料' //為空時顯示的文字，注意不是value
},{
fieldLabel: '只允許輸入數字'
,name:'TextBoxNumber'
,xtype:'numberfield'
//,allowDecimals: false // 允許小數點
//,allowNegative: false, // 允許負數
//,maxValue:1000 //最大值
//,minValue:0 //最小值
},{
fieldLabel: '下拉框控制元件',
name: 'DropDownList',
xtype: 'combo',
//本地資料來源 local/remote
mode:'local',
//設定為選項的text的欄位
displayField: "Name",
//設定為選項的value的欄位
valueField: "Id",
//是否可以輸入，還是隻能選擇下拉框中的選項
editable : false,
typeAhead: true,
//必須選擇一項
//forceSelection: true,
//輸入部分選項內容匹配的時候顯示所有的選項
triggerAction: 'all',
//selectOnFocus:true,
//資料
store:new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [ [1,'男'],[0,'女'] ]
})
}, {
fieldLabel: '日曆控制元件',
xtype: 'datefield',
name: 'DateControl',
format: "Y-m-d",
editable : false
//, 預設當前日期
//value:new Date().dateFormat('Y-m-d')
},{
fieldLabel: '單選控制元件'
,xtype:'radiogroup'
,name:'Radios'
,items:[
{name : 'RadioItems',boxLabel:'選我',inputValue:'1',checked:true},
{name : 'RadioItems',boxLabel:'選我吧',inputValue:'0'}
]
},{
fieldLabel: '複選控制元件'
,xtype:'checkboxgroup'
,name:'Checkboxs'
//columns屬性表示用2行來顯示資料
,columns:2
,items:[
{name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},
{name : 'CheckboxItems',boxLabel:'蘋果',inputValue:'B'},
{name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'},
{name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'}
]
},{
fieldLabel: '文字域控制元件'
,xtype:'textarea'
,value:'可以輸好多字！'
,height:50
},{
fieldLabel: '時間控制元件'
,xtype:'timefield'
//格式化輸出 預設為 "g:i A"
//"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
,format:'H:i'
//時間間隔(分鐘)
,increment: 60
},{
fieldLabel: '標籤頁'
,xtype:'fieldset'
,title: '標籤頁'
,autoHeight:true
,items :[{
xtype: 'panel',
title: '標籤頁中的面板',
frame: true,
height: 50
}]
},{
fieldLabel: '線上編輯器'
,xtype:'htmleditor'
,width:260
,height:100
//以下為預設選項，其他請參照原始碼
//,enableColors: false
//,enableFormat : true
//,enableFontSize : true
//,enableAlignments : true
//,enableLists : true
//,enableSourceEdit : true
//,enableLinks : true
//,enableFont : true
}],
buttons: [{
text: "保 存"
,handler:function(){
MsgInfo('儲存');
}
}, {
text: "取 消"
,handler:function(){
form1.form.reset();
}
}]
});
function MsgInfo(str_msg)
{
Ext.MessageBox.show({
title: '提示',
msg: str_msg,
width: 400,
icon:Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
});
}
});
1. window控制元件
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello"> </div>
2. render 方法後面的引數表示頁面上的div 元素id，也可以直接在引數中通過renderTo 參
數來省略手動讞用render 方法，只需要在建構函式的引數中新增一個renderTo 屬性即可，
3. tab panel
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
4. 配置一個面板：
new Ext.Panel({
title:"面板",
html"面板內容",
height:100}
);
再比如建立一個按鈕：
var b=new Ext.Button({
text:"新增",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
再比如建立一個Viewport 及其中的內容：
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板內容",
height:100},
{region:"center",
xtype:"grid",
title:"學生資訊管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});
5. 事件處理
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
6. addLinster 方法的另外一個簡寫形式是on
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
由於在呼叫addListener 的時候傳遞指定的delay 為2000，因此當用戶點選按鈕的時候，
不會馬上執行事件響應函式，而是在2000 毫秒，也就是兩秒後才會彈出提示資訊框。
7. 面板由以下幾個部分組成，一個頂部工具欄、一個底部工具欄、面板頭部、面板尾部、面板主區域幾個部分元件。面板類中還內建了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得我們可以輕鬆實現自定義的行為，面板可以放入其它任何容器中，面板本身是一個容器，他裡面又可以包含各種其它元件。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板頭部header",
width:300,
height:200,
html:'<h1>面板主區域</h1>',
tbar:[{text:'頂部工具欄topToolbar'}],
bbar:[{text:'底部工具欄bottomToolbar'}],
buttons:[{text:"按鈕位於footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
8.工具欄
面板中可以有工具欄，工具欄可以位於面板頂部或底部，Ext 中工具欄是由Ext.Toolbar類表示。工具欄上可以存放按鈕、文字、分隔符等內容。面板物件中內建了很多實用的工具欄，可以直接通過面板的tools 配置選項往面板頭部加入預定義的工具欄選項。
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板頭部header",
width:300,
height:200,
html:'<h1>面板主區域</h1>',
tbar:[new Ext.Toolbar.TextItem('工具欄:'),
{xtype:"tbfill"},//導致新增與儲存右對齊
{pressed:true,text:'新增'},
{xtype:"tbseparator"},
{pressed:true,text:'儲存'}
],
tools:[
{id:"save"},
{
id:"help",
handler:function(){
Ext.Msg.alert('help','please help me!');
}
},
{id:"close"}
],
bbar:[{text:'底部工具欄bottomToolbar'}],
buttons:[{text:"按鈕位於footer"}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
9. ViewPort
VeiwPort 代表整個瀏覽器顯示區域，該物件渲染到頁面的body 區域，並會隨著瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort 例項。
不需要renderTo這樣的配置項，直接顯示到body區域
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:
[
{title:"面板",
region:"north",
height:50,
html:"<h1>網站後臺管理系統!</h1>"
},
{title:"選單",
region:"west",
width:200,
collapsible:true,
html:"選單欄"
},
{
xtype:"tabpanel",
region:"center",
items:[{title:"面板1",html:"tab1"},
{title:"面板2",html:"tab2"}]
}
]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
10. 視窗
<script type="text/javascript">
var i=0;
function newWin()
{
var win=new Ext.Window({title:"視窗"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新視窗" />
</body>
11. 視窗分組操作
視窗是分組進行管理的，可以對一組視窗進行操作，預設情況下的視窗都在預設的組Ext.WindowMgr 中。視窗分組由類Ext.WindowGroup 定義，該類包括bringToFront、getActive、hideAll、sendToBack 等方法用來對分組中的視窗進行操作。
<script type="text/javascript">
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"視窗"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}
function hideAll()
{
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
</script>
</head>
<body>
<input id="btn" type="button" name="add" value="新視窗" />
<input id="btnToBack" type="button" name="add" value="放到後臺" />
<input id="btnHide" type="button" name="add" value="隱藏所有" />
</body>
12. 對話方塊
Ext 的對話方塊都封裝在Ext.MessageBox 類，該類還有一個簡寫形式即Ext.Msg，可以直接通過Ext.MessageBox 或Ext.Msg 來直接呼叫相應的對話方塊方法來顯示Ext 對話方塊。看下面的程式碼：
alert對話方塊
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("請注意","這是ExtJS的提示框");//Ext.Msg.alert("請注意","這是ExtJS的提示框");
});
});
</script>
</head>
<body>
<input id="btnAlert" type="button" value="alert框" />
</body>
13. 確認對話方塊，並提示點了什麼
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("請確認","真的點啦？", function(button,text){
if(button=='yes')
{
Ext.Msg.alert("好吧，你還真點了....");
}
else
{
Ext.Msg.alert("還好沒點Yes");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你點點看" />
</body>
13. prompt，輸入框，根據選擇，彈出內容
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("吐槽吧","你想吐槽點什麼？", function(button,text){
if(button=='ok')
{
Ext.Msg.alert("你說的是："+text);
}
else
{
Ext.Msg.alert("耍我呢，你點的是cancel！");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你點點看" />
</body>
14. 自定義儲存詢問
<script type="text/javascript">
function save(button)
{
if(button=="yes")
{
//執行資料儲存操作
Ext.Msg.alert("已儲存");
} else if(button=="no")
{
//不儲存資料
Ext.Msg.alert("你點選了不儲存");
} else
{
//取消當前操作
Ext.Msg.alert("操作已取消");
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'儲存資料',
msg: '你已經作了一些資料操作，是否要儲存當前內容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="你點點看" />
</body>
15. 基本表格GridPanel
ExtJS 中的表格功能非常強大，包括了排序、快取、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯等實用功能。
表格由類Ext.grid.GridPanel 定義，繼承自Panel，其xtype 為grid。ExtJS 中，表格Grid必須包含列定義資訊， 並指定表格的資料儲存器Store 。表格的列資訊由類Ext.grid.ColumnModel 定義、而表格的資料儲存器由Ext.data.Store 定義，資料儲存器根據解析的資料不同分為JsonStore、SimpleStroe、GroupingStore 等。
<script type="text/javascript">
function showUrl()
{
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"專案名稱",dataIndex:"name",sortable:true},
{header:"開發團隊",dataIndex:"organization",sortable:true},
{header:"網址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:150,
width:600,
columns:[{header:"專案名稱",dataIndex:"name"},
{header:"開發團隊",dataIndex:"organization"},
{header:"網址",dataIndex:"homepage",renderer:showUrl}],
cm:colM,
store:store,
autoExpandColumn:2
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
上面的程式碼中，第一行“var data=…”用來定義表格中要顯示的資料，這是一個[][]二維陣列；第二行“var store=…”用來建立一個數據儲存，這是GridPanel 需要使用配置屬性，資料儲存器Store 負責把各種各樣的資料（如二維陣列、JSon 物件陣列、xml 文字）等轉換成ExtJS的資料記錄集Record，關於資料儲存器Store 我們將在下一章中作專門介紹。第三行“var grid= new Ext.grid.GridPanel(…)”負責建立一個表格，表格包含的列由columns 配置屬性來描述，columns 是一陣列，每一行資料元素描述表格的一列資訊，表格的列資訊包含列頭顯示文字(header)、列對應的記錄集欄位(dataIndex)、列是否可排序(sorable)、列的渲染函式(renderer)、寬度(width)、格式化資訊(format)等，在上面的列子中只用到了header 及dataIndex。
16. Ext.Viewport
一個表示程式可視區域的特殊容器（瀏覽器可視區域）。
A specialized container representing the viewable application area (the browser viewport).
視窗渲染在document的body標籤上，並且根據瀏覽器可視區域的大小自動調整並且管理視窗的大小變化。一個頁面上只允許存在一個viewport。所有的{@link Ext.Panel 面板}增加到viewport，通過她的items，或者通過她的子面板（子面板也都可以擁有自己的layout）的items，子面板的add方法，這種設計讓內部佈局的優勢非常明顯。
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.
Viewport不支援滾動，所以如果子面板需要滾動支援可以使用autoScroll配置。
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.
展示一個經典的border佈局的viewport程式示例:
Example showing a classic application border layout :
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
17. 表單案例
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表單控制元件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//設定標籤對齊方式
labelAlign: 'right',
//設定標籤寬
labelWidth: 170,
//設定按鈕的對齊方式
buttonAlign:'center',
//預設元素屬性設定
defaults:{
width:180
},
items: [{
fieldLabel: '文字框控制元件',
name: 'TextBox',
xtype: 'textfield'
//,readOnly : true //只讀
//,emptyText :'請輸入資料' //為空時顯示的文字，注意不是value
},{
fieldLabel: '只允許輸入數字'
,name:'TextBoxNumber'
,xtype:'numberfield'
//,allowDecimals: false // 允許小數點
//,allowNegative: false, // 允許負數
//,maxValue:1000 //最大值
//,minValue:0 //最小值
},{
fieldLabel: '下拉框控制元件',
name: 'DropDownList',
xtype: 'combo',
//本地資料來源 local/remote
mode:'local',
//設定為選項的text的欄位
displayField: "Name",
//設定為選項的value的欄位
valueField: "Id",
//是否可以輸入，還是隻能選擇下拉框中的選項
editable : false,
typeAhead: true,
//必須選擇一項
//forceSelection: true,
//輸入部分選項內容匹配的時候顯示所有的選項
triggerAction: 'all',
//selectOnFocus:true,
//資料
store:new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [ [1,'男'],[0,'女'] ]
})
}, {
fieldLabel: '日曆控制元件',
xtype: 'datefield',
name: 'DateControl',
format: "Y-m-d",
editable : false
//, 預設當前日期
//value:new Date().dateFormat('Y-m-d')
},{
fieldLabel: '單選控制元件'
,xtype:'radiogroup'
,name:'Radios'
,items:[
{name : 'RadioItems',boxLabel:'選我',inputValue:'1',checked:true},
{name : 'RadioItems',boxLabel:'選我吧',inputValue:'0'}
]
},{
fieldLabel: '複選控制元件'
,xtype:'checkboxgroup'
,name:'Checkboxs'
//columns屬性表示用2行來顯示資料
,columns:2
,items:[
{name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},
{name : 'CheckboxItems',boxLabel:'蘋果',inputValue:'B'},
{name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'},
{name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'}
]
},{
fieldLabel: '文字域控制元件'
,xtype:'textarea'
,value:'可以輸好多字！'
,height:50
},{
fieldLabel: '時間控制元件'
,xtype:'timefield'
//格式化輸出 預設為 "g:i A"
//"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
,format:'H:i'
//時間間隔(分鐘)
,increment: 60
},{
fieldLabel: '標籤頁'
,xtype:'fieldset'
,title: '標籤頁'
,autoHeight:true
,items :[{
xtype: 'panel',
title: '標籤頁中的面板',
frame: true,
height: 50
}]
},{
fieldLabel: '線上編輯器'
,xtype:'htmleditor'
,width:260
,height:100
//以下為預設選項，其他請參照原始碼
//,enableColors: false
//,enableFormat : true
//,enableFontSize : true
//,enableAlignments : true
//,enableLists : true
//,enableSourceEdit : true
//,enableLinks : true
//,enableFont : true
}],
buttons: [{
text: "保 存"
,handler:function(){
MsgInfo('儲存');
}
}, {
text: "取 消"
,handler:function(){
form1.form.reset();
}
}]
});
function MsgInfo(str_msg)
{
Ext.MessageBox.show({
title: '提示',
msg: str_msg,
width: 400,
icon:Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
});
}
});