PDA

View Full Version : [CLOSED] Disable/Enable a Grid via it's Toolbar Button ?



sisa
Apr 18, 2013, 9:43 AM
Hi all, I need a idea :-)
We use a ComboBox and a Button placed on a Grid's Toolbar. Based on a selected ComboBox Value the Grid should be Enabled/Disabled and the Button should be Visible or not.

The Problem, while disabling the Grid the Toolbar is also Disabled. That avoids the user to re-Enable the Grid again :-(

I could move the Combo outside the Grid's Toolbar - but It looks much cooler to have the Combo in the Toolbar...

So, any suggestions how to have the cool looking and also the functionality ?

Peter

Daniil
Apr 18, 2013, 10:47 AM
Hi Peter,

Maybe, there is a possibility to separate a Toolbar from a GridPanel, but have the same look.

Could you provide a test case?

sisa
Apr 18, 2013, 12:03 PM
Let's try - It's difficult because we use some custom components and user controls, anyway...




<ext:Container runat="server" Border="false" Layout="Fitlayout">
<Items>
<ext:Panel ID="pnlDeclarationItemDetail" runat="server" Height="105" Width="350" Layout="card" ActiveIndex="0" Border="false" Frame="true">
<TopBar>
<ext:Toolbar ID="toolBarMain" runat="server" StyleSpec="padding-bottom:0px;" Border="true">
<Items>
<ext:TabStrip ID="tabStripMain" runat="server" ActionContainerID="pnlDeclarationItemDetail" Border="true">
<Items>
<ext:Tab TabID="tabPermit" Text="Permits" Icon="BulletWhite" />

</Items>
</ext:TabStrip>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="pnlPermit" runat="server" Header="False" Layout="FitLayout">
<Items>
<ext:GridPanel runat="server" ID="gridPermit" Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="toolbarPermit" runat="server">
<Items>
<ext:ComboBox runat="server" ID="cboPermitObligation" PaddingSpec="5 0 10 0">
<Listeners>
<Select Handler="changePermitObligation(item,records)" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="storePermit" runat="server">
<Model>
<ext:Model ID="modelPermit" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="PermitAuthorityId" />
<ext:ModelField Name="PermitAuthority" />
<ext:ModelField Name="Number" />
<ext:ModelField Name="ValideFrom" />
<ext:ModelField Name="ValideTo" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="colIdPermit" runat="server" DataIndex="Id" Text="Id" Width="100" Hidden="True" Groupable="False" Sortable="False" MenuDisabled="True" />
<ext:ComponentColumn ID="colPermitType" runat="server" Editor="true" DataIndex="PermitAuthorityId" Text="<%$ Resources:CUSTRocheImport, PermitType %>" Width="150">
<Component>
<ext:ComboBox runat="server" ID="cboPermitType" AutoPostBack="True" />
</Component>
</ext:ComponentColumn>
<ext:Column ID="colPermitAuthority" runat="server" DataIndex="PermitAuthority" Text="<%$ Resources:CUSTRocheImport, PermitAuthority %>" Width="125" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" Flex="1" />
<ext:Column ID="colPermitNumber" runat="server" DataIndex="Number" Text="<%$ Resources:CUSTRocheImport, PermitNumber %>" Width="125" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
<ext:DateColumn ID="colPermitExpiryDateFrom" runat="server" DataIndex="ValideFrom" Text="<%$ Resources:CUSTRocheImport, PermitExpiryDate %>" Format="%$ Resources:CUSTRocheImport, _DateShort %>" Width="125" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
<ext:DateColumn ID="colPermitExpiryDateTo" runat="server" DataIndex="ValideTo" Text="<%$ Resources:CUSTRocheImport, PermitExpiryDate %>" Format="%$ Resources:CUSTRocheImport, _DateShort %>" Width="125" Hidden="False" Groupable="true" Sortable="true" MenuDisabled="False" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelPremit" runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Container>




function changePermitObligation(item, records) {
var permGrid = Ext.getCmp('gridPermit');
if (records[0].data.Value == '0') {
permGrid.setDisabled(true);
}
else {
permGrid.setDisabled(false);
}
}

This example has no button in the toolbar but I think you can see what I mean :-)

Peter

Daniil
Apr 18, 2013, 1:42 PM
Please take a look at the example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" />
</Model>
</ext:Store>

<ext:Button
runat="server"
Text="Toggle"
Handler="App.GridPanel1.setDisabled(!App.GridPanel1.disable d);
App.GridPanel2.setDisabled(!App.GridPanel2.disable d);" />

<ext:Container
runat="server"
Height="100"
Width="350"
Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ComboBox runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="test" DataIndex="test" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Container>

<br />

<ext:Container
runat="server"
Height="100"
Width="350">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Toolbar runat="server" Height="25" Cls="x-docked-top">
<Items>
<ext:ComboBox runat="server" />
</Items>
</ext:Toolbar>
<ext:Container runat="server" Flex="1" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1">
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="test" DataIndex="test" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</form>
</body>
</html>