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

Posted 2023-02-26

【中文标题】如何在表单面板中添加网格面板？

【英文标题】：How to add a grid panel in a form panel?

【发布时间】：2013-10-09 07:42:33

【问题描述】：

下面是我在表单面板中添加网格面板的 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 允许我:-(

【参考方案1】：

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

试试这个..

【参考方案2】：

有很多东西你必须学习.. 您可以在单个面板中呈现一组项目。使用类似的项目：[xxx,xxxx,..] 像这样更改窗口编码

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