ExtJS基礎第三講學習
第三講：面板元件Panel
1.最簡單的Panel示例。 2.帶滾動條的Panel 3.可收縮的Panel 4.包含頂部和底部工具欄的Panel 5.為按鈕新增事件處理 6.可拖動的Panel 7.拖動後，不顯示以前位置的虛線框 8.拖動後，停留在拖動位置 9.拖動時，不顯示以前的陰影 10. Panel頂部工具欄
示例一：
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html: } ); } ); |
1.autoLoad：有效的url字串，把那個url中的body中的資料載入顯示，但是可能沒有樣式和js控制，只是html資料2.autoScroll:設為true則內容溢位的時候產生滾動條，預設為false3.autoShow:設為true顯示設為"x-hidden"的元素，很有必要，預設為false4.bbar:底部條，顯示在主體內5.tbar:頂部條，顯示在主體內6.buttons:按鈕集合，自動新增到footer中（footer引數，顯示在主體外）7.buttonAlign:footer中按鈕的位置，列舉值為："left","right","center",預設為right
示例二：顯示滾動條
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true } ); } ); |
例項三：可收縮的Panel
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true } ); } ); |
示例四：包含頂部和底部工具欄的Panel
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1"},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}] } ); } ); |
示例五：為按鈕新增事件處理。
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點選","頂部按鈕1被點選")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}] } ); } ); |
示例六：可拖動的Panel
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點選","頂部按鈕1被點選")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:true } ); } ); |
示例七：拖動後，不顯示以前位置的虛線框
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點選","頂部按鈕1被點選")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false } } ); } ); |
示例八：拖動後，停留在拖動位置。
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點選","頂部按鈕1被點選")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false, onDrag:function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); }, endDrag:function(e) { this.panel.setPosition(this.x,this.y); } }, x:100, y:100, floating:true } ); } ); |
示例九：拖動時，不顯示以前的陰影。
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點選","頂部按鈕1被點選")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false, onDrag:function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); var s = this.panel.getEl().shadow; s.hide(); }, endDrag:function(e) { this.panel.setPosition(this.x,this.y); } }, x:100, y:100, floating:true } ); } ); |
示例十：Panel頭部工具欄
|
Ext.onReady( function() { new Ext.Panel( { tools:[{id:"save",handler:function(){Ext.MessageBox.confirm("儲存檔案","是否儲存檔案");}},{id:"help"}], renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點選","頂部按鈕1被點選")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false, onDrag:function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true);
|