フォームを複数パネルに分割 naotori Follow 2010-09-02 16:26:32 License: GPLv3 License Fork0 Fav0 View743 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 79 lines HTML 2 lines CSS 2 lines フォームを複数パネルに分割 Ext JS 3.2.1 Ext Base JS 3.2.1 Ext.onReady(function(){ var p = new Ext.Panel({ layout: 'card', defaults: { xtype: 'form', buttonAlign: 'center', labelWidth: 50, border: false, style: { padding: '5px 5px 0 5px' } }, title: '複数フォーム', renderTo: Ext.getBody(), width: 250, height: 300, activeItem: 0, items: [{ ref: 'card1', defaults: { xtype: 'textfield' }, items: [ { fieldLabel: 'Text1', name: 'Text1' }, { fieldLabel: 'Text2', name: 'Text2' }, { fieldLabel: 'Text3', name: 'Text3' }, { fieldLabel: 'Text4', name: 'Text4' }, { fieldLabel: 'Text5', name: 'Text5' } ], buttons: [{ text: 'Next', handler: function(){ p.layout.setActiveItem(p.card2); } }] },{ ref: 'card2', defaults: { xtype: 'textfield' }, items: [ { fieldLabel: 'Text6', name: 'Text6' }, { fieldLabel: 'Text7', name: 'Text7' }, { fieldLabel: 'Text8', name: 'Text8' }, { fieldLabel: 'Text9', name: 'Text9' } ], buttons: [{ text: 'Back', handler: function(){ p.layout.setActiveItem(p.card1); } },{ text: 'Next', handler: function(){ p.layout.setActiveItem(p.card3); } }] },{ ref: 'card3', defaults: { xtype: 'textfield' }, items: [ { fieldLabel: 'Text10', name: 'Text11' }, { fieldLabel: 'Text11', name: 'Text12' } ], buttons: [{ text: 'Back', handler: function(){ p.layout.setActiveItem(p.card2); } },{ text: 'Finish!', handler: function(){ var str1 = p.card1.getForm().getValues(true); var str2 = p.card2.getForm().getValues(true); var str3 = p.card3.getForm().getValues(true); alert(str1+'&'+str2+'&'+str3); } }] }] }).show(); }); フォームを複数パネルに分割 Ext JS 3.2.1 Ext.onReady(function(){ var p = new Ext.Panel({ layout: 'card', defaults: { xtype: 'form', buttonAlign: 'center', labelWidth: 50, border: false, style: { padding: '5px 5px 0 5px' } }, title: '複数フォーム', renderTo: Ext.getBody(), width: 250, height: 300, activeItem: 0, items: [{ ref: 'card1', defaults: { xtype: 'textfield' }, items: [ { fieldLabel: 'Text1', name: 'Text1' }, { fieldLabel: 'Text2', name: 'Text2' }, { fieldLabel: 'Text3', name: 'Text3' }, { fieldLabel: 'Text4', name: 'Text4' }, { fieldLabel: 'Text5', name: 'Text5' } ], buttons: [{ text: 'Next', handler: function(){ p.layout.setActiveItem(p.card2); } }] },{ ref: 'card2', defaults: { xtype: 'textfield' }, items: [ { fieldLabel: 'Text6', name: 'Text6' }, { fieldLabel: 'Text7', name: 'Text7' }, { fieldLabel: 'Text8', name: 'Text8' }, { fieldLabel: 'Text9', name: 'Text9' } ], buttons: [{ text: 'Back', handler: function(){ p.layout.setActiveItem(p.card1); } },{ text: 'Next', handler: function(){ p.layout.setActiveItem(p.card3); } }] },{ ref: 'card3', defaults: { xtype: 'textfield' }, items: [ { fieldLabel: 'Text10', name: 'Text11' }, { fieldLabel: 'Text11', name: 'Text12' } ], buttons: [{ text: 'Back', handler: function(){ p.layout.setActiveItem(p.card2); } },{ text: 'Finish!', handler: function(){ var str1 = p.card1.getForm().getValues(true); var str2 = p.card2.getForm().getValues(true); var str3 = p.card3.getForm().getValues(true); alert(str1+'&'+str2+'&'+str3); } }] }] }).show(); }); use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/p0al/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/naotori/p0al" title="フォームを複数パネルに分割">フォームを複数パネルに分割 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags extjs Tweet twitter Tags extjs