フォームを複数パネルに分割

naotori

2010-09-02 16:26:32

License: GPLv3 License

Fork: 0

Fav: 0

View: 743

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

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

Tweet

twitter

Tags