1 2 | <script type ="text/javascript" src="lib/ext/ext-base.js"></script> <script type ="text/javascript" src="lib/ext/ext-all.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | var top = new Ext.FormPanel({ labelAlign: 'top', frame:true, title: 'Multi Column, Nested Layouts and Anchoring', bodyStyle:'padding:5px 5px 0', width: 600, items: [{ layout:'column', items:[{ columnWidth:.5, layout: 'form', items: [{ xtype:'textfield', fieldLabel: 'First Name', name: 'first', anchor:'95%' }, { xtype:'textfield', fieldLabel: 'Company', name: 'company', anchor:'95%' }] },{ columnWidth:.5, layout: 'form', items: [{ xtype:'textfield', fieldLabel: 'Last Name', name: 'last', anchor:'95%' },{ xtype:'textfield', fieldLabel: 'Email', name: 'email', vtype:'email', anchor:'95%' }] }] },{ xtype:'htmleditor', id:'bio', fieldLabel:'Biography', height:200, anchor:'98%' }], buttons: [{ text: 'Save' },{ text: 'Cancel' }] }); top.render(document.body); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | var LayoutExample = function(){ // everything in this space is private and only accessible in the HelloWorld block // define some private variables var dialog, showBtn; var toggleTheme = function(){ Ext.get(document.body, true).toggleClass('xtheme-gray'); }; // return a public interface return { init : function(){ showBtn = Ext.get('show-dialog-btn'); // attach to click event showBtn.on('click', this.showDialog, this); }, showDialog : function(){ if(!dialog){ // lazy initialize the dialog and only create it once dialog = new Ext.LayoutDialog("hello-dlg", { modal:true, width:600, height:400, shadow:true, minWidth:300, minHeight:300, proxyDrag: true, west: { split:true, initialSize: 150, minSize: 100, maxSize: 250, titlebar: true, collapsible: true, animate: true }, center: { autoScroll:true, tabPosition: 'top', closeOnTab: true, alwaysShowTabs: true } }); dialog.addKeyListener(27, dialog.hide, dialog); dialog.addButton('Submit', dialog.hide, dialog); dialog.addButton('Close', dialog.hide, dialog); var layout = dialog.getLayout(); layout.beginUpdate(); layout.add('west', new Ext.ContentPanel('west', {title: 'West'})); layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'})); // generate some other tabs layout.add('center', new Ext.ContentPanel(Ext.id(), { autoCreate:true, title: 'Another Tab', background:true})); layout.add('center', new Ext.ContentPanel(Ext.id(), { autoCreate:true, title: 'Third Tab', closable:true, background:true})); layout.endUpdate(); } dialog.show(showBtn.dom); } }; }(); // using onDocumentReady instead of window.onload initializes the application // when the DOM is ready, without waiting for images and other resources to load Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |