Results 1 to 5 of 5

Thread: 6.5.1 - FormPanel not rendered in Viewport - Sencha Guide Example (worked in 6.5.0)

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member sumit.madan's Avatar
    Join Date
    May 2009
    Location
    Bangalore, India
    Posts
    126
    Vote Rating
    30
      0  

    Default 6.5.1 - FormPanel not rendered in Viewport - Sencha Guide Example (worked in 6.5.0)

    The code from this Sencha Guide, no longer works in 6.5.1:
    http://docs.sencha.com/extjs/6.5.1/g...ata_forms.html

    When the code below is used in Sencha Fiddle (using ExtJS 6.5.1), the formpanel does not show when a grid row is clicked
    It works when using ExtJS 6.5.0

    https://fiddle.sencha.com/#view/editor&fiddle/25t5

    Browsers - Firefox / Chrome

    Code:
    Ext.Viewport.add({
        xtype: 'tabpanel',
        items: [{
            title: 'Employee Directory',
            xtype: 'grid',
            iconCls: 'x-fa fa-users',
            listeners: {
                itemtap: function() {
                    Ext.Viewport.add({
                        xtype: 'formpanel',
                        title: 'Update Record',
                        floating: true,
                        centered: true,
                        width:300,
                        modal: true,
                        items: [{
                            xtype: 'textfield',
                            name: 'firstname',
                            label: 'First Name'
                        }, {
                            xtype: 'toolbar',
                            docked: 'bottom',
                            items: ['->', {
                                xtype: 'button',
                                text: 'Submit',
                                iconCls: 'x-fa fa-check',
                                handler: function() {
                                    this.up('formpanel').destroy();
                                }
                            }, {
                                xtype: 'button',
                                text: 'Cancel',
                                iconCls: 'x-fa fa-close',
                                handler: function() {
                                    this.up('formpanel').destroy();
                                }
                            }]
                        }]
                    });
                }
            },
            store: {
                data: [{
                    "firstName": "Jean",
                    "lastName": "Grey",
                    "officeLocation": "Lawrence, KS",
                    "phoneNumber": "(372) 792-6728"
                }, {
                    "firstName": "Philip",
                    "lastName": "Fry",
                    "officeLocation": "Lawrence, KS",
                    "phoneNumber": "(318) 224-8644"
                }, {
                    "firstName": "Peter",
                    "lastName": "Quill",
                    "officeLocation": "Redwood City, CA",
                    "phoneNumber": "(718) 480-8560"
                }]
            },
            columns: [{
                text: 'First Name',
                dataIndex: 'firstName',
                flex: 1
            }, {
                text: 'Last Name',
                dataIndex: 'lastName',
                flex: 1
            }, {
                text: 'Phone Number',
                dataIndex: 'phoneNumber',
                flex: 1
            }]
        }, {
            title: 'About Sencha',
            iconCls: 'x-fa fa-info-circle'
        }]
    });

  2. #2
    Sencha Premium User
    Join Date
    Nov 2017
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by sumit.madan View Post
    The code from this Sencha Guide, no longer works in 6.5.1:
    http://docs.sencha.com/extjs/6.5.1/g...ata_forms.html

    When the code below is used in Sencha Fiddle (using ExtJS 6.5.1), the formpanel does not show when a grid row is clicked
    It works when using ExtJS 6.5.0

    https://fiddle.sencha.com/#view/editor&fiddle/25t5

    Browsers - Firefox / Chrome

    Code:
    Ext.Viewport.add({
        xtype: 'tabpanel',
        items: [{
            title: 'Employee Directory',
            xtype: 'grid',
            iconCls: 'x-fa fa-users',
            listeners: {
                itemtap: function() {
                    Ext.Viewport.add({
                        xtype: 'formpanel',
                        title: 'Update Record',
                        floating: true,
                        centered: true,
                        width:300,
                        modal: true,
                        items: [{
                            xtype: 'textfield',
                            name: 'firstname',
                            label: 'First Name'
                        }, {
                            xtype: 'toolbar',
                            docked: 'bottom',
                            items: ['->', {
                                xtype: 'button',
                                text: 'Submit',
                                iconCls: 'x-fa fa-check',
                                handler: function() {
                                    this.up('formpanel').destroy();
                                }
                            }, {
                                xtype: 'button',
                                text: 'Cancel',
                                iconCls: 'x-fa fa-close',
                                handler: function() {
                                    this.up('formpanel').destroy();
                                }
                            }]
                        }]
                    });
                }
            },
            store: {
                data: [{
                    "firstName": "Jean",
                    "lastName": "Grey",
                    "officeLocation": "Lawrence, KS",
                    "phoneNumber": "(372) 792-6728"
                }, {
                    "firstName": "Philip",
                    "lastName": "Fry",
                    "officeLocation": "Lawrence, KS",
                    "phoneNumber": "(318) 224-8644"
                }, {
                    "firstName": "Peter",
                    "lastName": "Quill",
                    "officeLocation": "Redwood City, CA",
                    "phoneNumber": "(718) 480-8560"
                }]
            },
            columns: [{
                text: 'First Name',
                dataIndex: 'firstName',
                flex: 1
            }, {
                text: 'Last Name',
                dataIndex: 'lastName',
                flex: 1
            }, {
                text: 'Phone Number',
                dataIndex: 'phoneNumber',
                flex: 1
            }]
        }, {
            title: 'About Sencha',
            iconCls: 'x-fa fa-info-circle'
        }]
    });

    Anyone has any updates?
    This is straight code fragment from modern tutorial and is not working? Why?

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    92
    Vote Rating
    7
      0  

    Default

    `Ext.Viewport.add(....).show();`

    You ned to call `.show()` after add to Viewport

  4. #4
    Sencha Premium User
    Join Date
    Nov 2017
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Thank yu lovelyhibabe,

    I was working on the Sencha Architect 4.2 tutorial - first modern app. with Ext.Viewport.add(...).show(); the form is still not showing - looks like the popupform is trying to load data from 'record' which it doesn't find.


    onPopupForm: function(grid) {
    debugger;
    Ext.Viewport.add({
    xtype: 'updaterecordform',
    width: 400,
    record: record,
    viewModel : {
    data: {
    employee: record
    }
    }
    }).show();
    }

    If I changed to gridchildtap, and add location.record instead, it works. But, the first modern app tutorial seems to be missing something.

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    92
    Vote Rating
    7
      0  

    Default

    Yes, `itemtap` is deprecated, it's `childtap` now, and parameters of this event are different.
    BTW, you should change `floating` to `floated` as well.

Similar Threads

  1. Replies: 1
    Last Post: 13 Feb 2014, 3:48 PM
  2. Viewport is not being rendered
    By stratboogie in forum Ext: Discussion
    Replies: 5
    Last Post: 5 Aug 2011, 6:07 AM
  3. Can a viewport to rendered to DIV?
    By netmille2000@yahoo.com in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Jan 2008, 10:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •