2013-10-09 66 views
0

下面是我的ExtJs 3.2代码,用于在表单面板中添加网格面板。不工作。如何在表单面板中添加网格面板?

function test(){//will be called after clicking on save, added now 
    var addForm=""; 
    var addGrid=""; 

    addForm=new Ext.FormPanel({ 
     frame: true, 
     items:[ 
       new Ext.form.FormPanel({ 
        title:'Select Start Point', 
        id:'startpoints', 
        autoHeight: false, 
        frame: true, 
        monitorValid: true, 

        items:[{ 
         xtype: 'combo', 
         fieldLabel:'Start Point', 
         width:150, 
         name: 'startpoint', 
         emptyText:'Select Start Point', 
         store:pointstore, 
         mode: 'local', 
         displayField:'start_point', 
         valueField:'start_point', 
         typeAhead: true, 
         triggerAction: 'all', 
         selectOnFocus:true, 
         forceSelection: true, 
         allowBlank:false 


        }], 

       }), 

       new Ext.form.FormPanel({ 
        title:'Select End Point', 
        id:'endpoints', 
        autoHeight: false, 
        frame: true, 
        monitorValid: true, 

        items:[{ 
         xtype: 'combo', 
         fieldLabel:'End Point', 
         width:150, 
         name: 'waypoint', 
         emptyText:'Select End Point', 
         store:pointstore, 
         mode: 'local', 
         displayField:'way_point', 
         valueField:'way_point', 
         typeAhead: true, 
         triggerAction: 'all', 
         selectOnFocus:true, 
         forceSelection: true, 
         allowBlank:false 


        }], 

       }), 
        //way point combo 
        new Ext.form.FormPanel({ 
         title:'Select Way Point', 
         id:'waypoints', 
         autoHeight: false, 
         frame: true, 
         monitorValid: true, 

         items:[{ 
         xtype: 'combo', 
          fieldLabel:'Way Point', 
          width:150, 
          name: 'waypoint', 
          emptyText:'Select Way Point', 
          store: pointstore, 
          mode: 'local', 
          displayField:'way_point', 
          valueField:'way_point', 
          typeAhead: true, 
          triggerAction: 'all', 
          selectOnFocus:true, 
          forceSelection: true, 
          allowBlank:false 


         }], 
         buttonAlign: 'center', 
         buttons:[{ 
          text:'Add' 


         }] 

        }), 

      ],//end of item 



      buttons:[{ 
       text: 'Ok', 
       //logic for Ok 

      },{ 
       text:'Cancel', 
       //logic for Cancel 
       handler: function(){ 
        addWindow.close(); 

       } 

      }] 

    });//end of Form Pannel 

    var grid_panel=new Ext.grid.EditorGridPanel({ 
     id: 'grid', 
     border:true, 
     frame:true, 
     height:150, 
     title:'Way Point Selection', 
     hideHeaders:true, 
     store: pointstore 


    }); 

     addWindow=new Ext.Window({ 
     title: 'Enter Details', 
     closable: false, 
     modal:true, 
     width: 295, 
     autoHeight: true, 
     items: [addForm], 
      items:[grid_panel] 
}).show(); 


}//end of function test 

我得到一个窗口,如果我评论“items:[grid_panel]”。 我想在“添加”按钮后添加一个网格面板,以便每次点击添加时,方式点应该添加在它中。我该怎么做。请给我代码。我已经通过一些类似的问题,但没有用。因为stackexchange力让我:-(

回答

1
Ext.create('Ext.form.Panel', { 
      bodyPadding: 10, 
      width: 200, 
      title: 'Languages', 
      items: grid, 
      renderTo: Ext.getBody() 
     }); 

试试这个我无法发布图像..

+0

谢谢......这是有益的 – himanshu

1

有很多的事情,你必须学会​​.. 您可以在一个单一的面板呈现的项目组。使用类的物品:[{XXX},{XXXX},..] 改变窗口编码这样

addWindow=new Ext.Window({ 
    title: 'Enter Details', 
    closable: false, 
    modal:true, 
    width: 295, 
    autoHeight: true, 
    items: [{addForm},{grid_panel}], 
    });