如何在表单面板中添加网格面板?

时间:2013-10-09 07:42:34

标签: javascript extjs gridpanel

下面是我的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 dint允许我: - (

2 个答案:

答案 0 :(得分:1)

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

试试这个..

答案 1 :(得分:1)

你必须学习很多东西.. 您可以在单个面板中渲染项目组。使用类似的项目:[{xxx},{xxxx},..] 像这样改变窗口编码

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