PDA

View Full Version : Extjs rowexpander with form



ajit.mankottil
25 Nov 2012, 6:32 PM
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,40330
Alex

mitchellsimoens
27 Nov 2012, 7:22 AM
I would extend the row expander, capture when it has been expanded and render a form into that element. On collapse, destroy the form.

ajit.mankottil
27 Nov 2012, 8:03 PM
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



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.


var tabPanel = new Ext.TabPanel({
activeTab: 0,
deferredRender: false,
items: [{
title: 'Testing',
items: [fsOutports]
}]
});


40401

ajit.mankottil
29 Nov 2012, 1:43 AM
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

40430


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];
}
});