Aug 12, 2013, 5:18 AM
[CLOSED] column alignment for totals toolbar
Ext 1.6
I have Grid with a bunch of columns. Each a different size and type. For ONE of the columns, I want to total that specific column. However, I cannot seem to get the totals value to align directly under the column I am totaling. I renamed all the columns to dummy names (and stripped down the example code)
I call the updateTotal JS via Load handler from store and from the columnResize handler in the grid and that works fine.
Is there a better way to do this? since what I am doing is not working. I am trying to iterate over all columns and add their width.
please assist.
Thanks,
/Z
JavaScript used:
I have Grid with a bunch of columns. Each a different size and type. For ONE of the columns, I want to total that specific column. However, I cannot seem to get the totals value to align directly under the column I am totaling. I renamed all the columns to dummy names (and stripped down the example code)
I call the updateTotal JS via Load handler from store and from the columnResize handler in the grid and that works fine.
Is there a better way to do this? since what I am doing is not working. I am trying to iterate over all columns and add their width.
please assist.
Thanks,
/Z
JavaScript used:
var updateTotal = function (grid) {
var fbar = Ext.getCmp("GridPanel").getBottomToolbar(),
column,
field,
width,
data = { t3: "Totals", t4: 0, t5: null },
c,
cs = grid.view.getColumnData();
var totalWidth = 0;
for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
column = grid.getColumnModel().columns[i];
c = cs[i];
if (c.name == "t6") {
var toolbarSpacer = Ext.getCmp("totalsSpacer");
var totalsAmount = 50;
toolbarSpacer.setWidth(totalWidth - 2);
totalsAmount.setValue((c.renderer)(data[c.name], {}, {}, 0, i, grid.store));
}
if (!grid.getColumnModel().columns[i].hidden) {
totalWidth += grid.getColumnModel().getColumnWidth(i);
}
}
fbar.doLayout();
};
<ColumnModel ID="ColumnModel" runat="server">
<Columns>
<ext:Column Width="0" Hidden="true"/>
<ext:Column Width="0" Hidden="true"/>
<ext:Column Width="0" Hidden="true"/>
<ext:Column Width="0" Hidden="true"/>
<ext:Column Width="0" Hidden="true"/>
<ext:Column Width="0" Hidden="true"/>
<ext:Column Width="0" Hidden="true"/>
<ext:CommandColumn Width="24" ColumnID="addNewRow">
<Commands>
<ext:GridCommand CommandName="AddRow" Icon="Add">
<ToolTip Text="Add New Row" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:DateColumn Header="Date" Width="90" Css="background-color: #cccccc;" Format="ddd MM/dd">
<Editor>
<ext:DateField ID="t1" runat="server" />
</Editor>
</ext:DateColumn>
<ext:TemplateColumn MenuDisabled="true" Header="t2" Editable="false" Locked="true" Css="word-wrap:break-word;" DataIndex="t2" Width="100" >
<Template ID="TemplateS" runat="server" >
<Html>
</Html>
</Template>
</ext:TemplateColumn>
<ext:Column Header="t3" Width="75">
<Renderer Fn="t3Renderer" />
<Editor>
<ext:ComboBox ID="t3"
runat="server"
Shadow="Drop"
Mode="Local"
TriggerAction="All"
ForceSelection="true"
DisplayField="description"
ValueField="id"
/>
</Editor>
</ext:Column>
<ext:Column Width="70" DataIndex="t4" >
<Renderer Fn="t4Renderer" />
<Editor>
<ext:TextField ID="t4Text" runat="server" />
</Editor>
</ext:Column>
<ext:Column Width="70" DataIndex="t5" >
<Renderer Fn="t5Renderer" />
<Editor>
<ext:TextField ID="t4Text" runat="server" />
</Editor>
</ext:Column>
<ext:Column ColumnID="t6" Header="Hours" Width="40" Css="background-color: #cccccc;" DataIndex="t6"/>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelT" runat="server" SingleSelect="true" />
</SelectionModel>
<BottomBar>
<ext:Toolbar ID="ToolbarT" runat="server" Layout="Container">
<Items>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ToolbarSpacer ID="totalsSpacer" Width="0" runat="server" />
<ext:DisplayField ID="totals"
runat="server"
DataIndex="totals"
Cls="total-field"
Text="-"
/>
</Items>
</ext:Toolbar>
Last edited by Baidaly; Aug 18, 2013 at 2:55 AM.
Reason: [CLOSED]
