Sep 30, 2016, 1:55 AM
Show display field as Tooltips of Combobox in GridPanel
There is one combobox column in a gridpanel,
I want it show the display field value in column and also the tooltips also show the display field, please help, thanks.
I want it show the display field value in column and also the tooltips also show the display field, please help, thanks.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
TypeGridStore.DataSource = new object[]
{
new object[] { "1", "long text 1" },
new object[] { "2", "long text 2" },
new object[] { "3", "long text 3" },
};
TypeGridStore.DataBind();
GridStore.DataSource = new object[]
{
new object[] { "2" },
};
GridStore.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
var TypeGridRenderer = function (value) {
var r = App.TypeGridStore.getById(value);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.Value;
};
var onBeforeShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
column = view.getHeaderByCell(toolTip.triggerElement),
data = record.get(column.dataIndex);
var td = toolTip.triggerElement,
cell = Ext.fly(td).child("div").dom;
toolTip.update(data);
return true;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel
runat="server"
ID="ShowGrid"
ColumnWidth="1"
EnableColumnHide="false" >
<Store>
<ext:Store
ID="GridStore"
runat="server" >
<Model>
<ext:Model runat="server" Name="ProInfoModel" >
<Fields>
<ext:ModelField Name="Type" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="ProType" DataIndex="Type" Width="80" >
<Editor>
<ext:ComboBox
ID="TypeGridCombo"
runat="server"
QueryMode="Local"
DisplayField="Value"
ValueField="Key"
EnableKeyEvents="true">
<Store>
<ext:Store ID="TypeGridStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Key" />
<ext:ModelField Name="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" TrackOver="true" EnableTextSelection="True" >
</ext:GridView>
</View>
</ext:GridPanel>
<ext:ToolTip
runat="server"
Target="={#{ShowGrid}.getView().el}"
Delegate=".x-grid-cell"
TrackMouse="true">
<Listeners>
<BeforeShow Handler="return onBeforeShow(this, #{ShowGrid});" />
</Listeners>
</ext:ToolTip>
</body>
</html>