フォームを複数パネルに分割 naotori Follow 2010-09-02 16:26:32 License: GPLv3 License Fork0 Fav0 View816 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 Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <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> extjs Tweet twitter Tags extjs
