1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    76
    Vote Rating
    0
    ajit.mankottil is on a distinguished road

      0  

    Default Extjs rowexpander with form

    Extjs rowexpander with form


    Hi,

    I need to compare multiple quotation in one screen.

    One quotation has three grids and a few text area. I need to generate these control dynamically because I don't know how many quotation need to be compare until data sent back form service. Attached is my screen design.

    Please let me know how do I generate or loop through this kind of multiple form or panel dynamically. I am thinking to use grid with rowexpander but I have no idea how to add extjs form panel into rowexpender.

    Thanks in advance for any suggestion.

    Regards,compare.png
    Alex

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    I would extend the row expander, capture when it has been expanded and render a form into that element. On collapse, destroy the form.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    76
    Vote Rating
    0
    ajit.mankottil is on a distinguished road

      0  

    Default Renderer issue in RowPanelExpender

    Renderer issue in RowPanelExpender


    Hi,
    I am adding form panel into row panel expander but I got following error -:


    "htmlfile: Unknown runtime error"


    If I added field-set directly into tab, it is showing but rendering problem. Grid's width is very small.


    Please let's me know how I can add form panel into RowPanelExpander.


    Thanks,
    Alex

    Code:
    var expander = new Ext.ux.grid.RowPanelExpander({
            createExpandingRowPanelItems: function (record, rowIndex) {
    
    
                outportStore = new Ext.data.JsonStore({
                    loadMask: false,
                    autoLoad: false,
                    autoDestroy: true,
                    root: 'result',
                    fields: ['BusinessUnitId', 'Name', 'IsSelected'],
                    idProperty: 'BusinessUnitId'
                });
    
    
                outportStore.loadData({ "result": record.data.ContractOutportsDtos });
    
    
                var chkConducted = new Ext.grid.CheckColumn({
                    header: '',
                    id: 'chkPost',
                    dataIndex: 'IsSelected',
                    width: 1
                });
    
    
                var outportColModel = new Ext.grid.ColumnModel([
    			            new Ext.grid.RowNumberer(),
                            chkConducted, {
                                header: "Outport",
                                width: 10,
                                sortable: true,
                                dataIndex: 'Name'
                            }]);
    
    
                var grdoutport = new Ext.grid.EditorGridPanel({
                    store: outportStore,
                    colModel: outportColModel,
                    plugins: [chkConducted],
                    frame: true,
                    loadMask: false,
                    viewConfig: {
                        forceFit: true
                    },
                    style: 'margin:5px 0 5px 0',
                    autoHeight: true,
                    autoWidth: true,
                    columnLines: true,
                    enableHdMenu: false,
    
    
                    sm: new Ext.grid.RowSelectionModel({
                        singleSelect: true
                    }),
                    clicksToEdit: 1,
                    anchor: '90%'
                });
    
    
                var txtSubmittedByName = {
                    xtype: 'textfield',
                    fieldLabel: 'Submitted By Name',
                    id: 'txtSubmittedByName',
                    name: 'name',
                    anchor: '90%'
                };
    
    
                var fsOutports = {
                    xtype: 'fieldset',
                    columnWidth: 1,
                    title: 'Contract Mapping with Outports',
                    collapsible: false,
                    autoHeight: true,
                    margins: '5 5 5 5',
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    layout: 'column',
                    items: [{
                        columnWidth: 1,
                        border: false,
                        items: [txtSubmittedByName]
                    }, {
                        columnWidth: 0.40,
                        border: false,
                        items: [grdoutport]
                    }]
                };
    
    
                var formPanel = new Ext.FormPanel({
                    layout: 'anchor',
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    items: [fsOutports]
    
    
                });
    
    
                var tabPanel = new Ext.TabPanel({
                    activeTab: 0,
                    deferredRender: false,
                    items: [{
                        title: 'Testing',
                        items: [formPanel]
                    }]
                });
                
                return [tabPanel];
            }
        });
    If I added fiedset directly into tab, it is working but not renderer correctly. Please see the attached image.
    Code:
    var tabPanel = new Ext.TabPanel({
                    activeTab: 0,
                    deferredRender: false,
                    items: [{
                        title: 'Testing',
                        items: [fsOutports]
                    }]
                });
    rowexpender.jpg

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    76
    Vote Rating
    0
    ajit.mankottil is on a distinguished road

      0  

    Default


    I thinks I am almost done with my requirement after using Ext.ux.grid.RowPanelExpander extension. But I still facing with small issue with layout. I am using fieldset and column layout and added into tabpanel in RowPanelExpander but width is not working and border is showing. Why column layout is not rendering correctly? Any config I am missing?

    Thanks,
    Alex

    compare.jpg
    Code:
    var expander = new Ext.ux.grid.RowPanelExpander({
            createExpandingRowPanelItems: function (record, rowIndex) {
    
    
                outportStore = new Ext.data.JsonStore({
                    id : "outportStore" + record.data.ContractId,
                    loadMask: false,
                    autoLoad: false,
                    autoDestroy: true,
                    root: 'result',
                    fields: ['BusinessUnitId', 'Name', 'IsSelected'],
                    idProperty: 'BusinessUnitId'
                });
    
    
                outportStore.loadData({ "result": record.data.ContractOutportsDtos });
    
    
                var chkConducted = new Ext.grid.CheckColumn({
                    header: '',
                    sortable: false,
                    dataIndex: 'IsSelected',
                    width: 20
                });
    
    
                var outportColModel = new Ext.grid.ColumnModel([
    			            new Ext.grid.RowNumberer(),
                            chkConducted, {
                                header: "Outport",
                                sortable: true,
                                dataIndex: 'Name'
                            }]);
    
    
    
    
                var grdoutport = new Ext.grid.EditorGridPanel({
                    id:"grdoutport"+record.data.ContractId,
                    store: outportStore,
                    colModel: outportColModel,
                    plugins: [chkConducted],
                    frame: true,
                    loadMask: false,
                    viewConfig: {
                        forceFit: true
                    },
                    style: 'margin:5px 0 5px 0',
                    autoHeight: true,
                    autoWidth: true,
                    columnLines: true,
                    enableHdMenu: false,
                    sm: new Ext.grid.RowSelectionModel({
                        singleSelect: true
                    }),
                    clicksToEdit: 1,
                    anchor: '100%'
                });
    
    
                var fsRequestedItems = {
                    id: "fsRequestedItems" + record.data.ContractId,
                    xtype: 'fieldset',
                    columnWidth: 1,
                    title: 'Requested Line Items',
                    collapsible: false,
                    margins: '5 5 5 5',
                    anchor: '90%',
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    layout: 'column',
                    items: [grdoutport]
                };
    
    
                var txtComments = {
                    xtype: 'textarea',
                    id: 'txtComments' +record.data.ContractId, 
                    fieldLabel: 'Comments',
                    //hideLabel: true,
                    name: 'Comments',
                    maxLength: 1000,
                    flex: 1,  // Take up all *remaining* vertical space
                    anchor: '97%'
                };
    
    
                var txtSubmittedByName = {
                    id: 'txtSubmittedByName' +record.data.ContractId, 
                    xtype: 'textfield',
                    fieldLabel: 'Submitted By Name',
                    //labelStyle: 'width:140px',
                    name: 'name',
                    anchor: '90%'
                };
    
    
                var txtSubmittedByPostion = {
                    id: 'txtSubmittedByPostion' +record.data.ContractId, 
                    xtype: 'textfield',
                    fieldLabel: 'Position',
                    name: 'position',
                    anchor: '95%'
                };
    
    
                var fsComments = {
                    id: 'fsComments' +record.data.ContractId, 
                    xtype: 'fieldset',
                    columnWidth: 0.5,
                    title: 'Comments',
                    collapsible: false,
                    defaultHidden: false, //this config is using Security Control
                    
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    items: [
                        {
                            //row two
                            layout: 'form',
                            border: false,
                            items: [txtComments]
                        }, {   //row one
                            layout: 'column',
                            border: false,
                            items: [
                                { layout: 'form', border: false, items: [txtSubmittedByName] },
                                { layout: 'form', border: false,  items: [txtSubmittedByPostion] }
                            ]
                        }
                    ],
                    anchor: '95%'
                };
    
    
                var actionConfirmDraftPO = new Ext.Action({
                    text: 'Confirm Draft PO',
                    tooltip: 'Confirm Draft PO',
                    disabled: false,
                    handler: function () {
                        var tempOutports = [];
                        var outportIds = "";
                        var i = 0;
                        grdoutport.getStore().each(function (record) {
                            if (record.get('IsSelected')) {
                                tempOutports[i] = record.data;
                                if (outportIds == "")
                                    outportIds = record.data.BusinessUnitId;
                                else
                                    outportIds = outportIds + "," + record.data.BusinessUnitId
                                i++;
                            }
                        });
                    },
                    iconCls: 'tDetail'
                });
    
    
                var quotationContainer = [
                  {
                      xtype: 'container',
                      title: 'Quotation',
                      layout: 'form',
                      style: 'padding:5px 5px 0',
                      hidden: true,
                      forceLayout: true,
                      viewConfig: {
                          forceFit: true
                      },
                      items: [fsComments, fsRequestedItems]
                  }
                ]
                var tabPanel = new Ext.TabPanel({
                    activeTab: 0,
                    border: false,
                    deferredRender: false,
                    defaults: {
                        frame: false,
                        split: true
                    },
                    bodyStyle: {
                        padding: '10px 20px'
                    },
                    items: [quotationContainer],
                    tbar: [actionViewDetails, $Constants.tbSpacer, $Constants.tbSeparator, $Constants.tbSpacer]
                });
    
    
                //tabPanel.hideTabStripItem(0);
    
    
                return [tabPanel];
            }
        });

Thread Participants: 1