先show一下效果给大家坚持看下去的动力：
关键代码：
复制代码 代码如下:
<ext:Column ColumnID="ContactName" DataIndex="ContactName" Header="Contact Name"
Width="150">
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="stoContactName" DisplayField="Name"
ValueField="Name" TypeAhead="false" LoadingText="Searching..." Width="570" PageSize="10"
Editable="true" Mode="Remote" MinListWidth="200" ItemSelector="tr.search-item"
MinChars="1" MsgTarget="Side" TriggerAction="All" Grow="true">
<CustomConfig>
<ext:ConfigItem Name="tpl" Value="#{TplContactName}" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
</Editor>
</ext:Column>
由于ComboBox作为Editor，是不能直接配置模板的，所以模板要独立写：
复制代码 代码如下:
<ext:XTemplate ID="TplContactName" runat="server">
<div>
<table id="data_table" class="t1">
<thead>
<tr>
<th>
Name
</th>
<th>
Desc
</th>
</tr>
</thead>
<tbody>
<tpl for=".">
<tr class="search-item">
<td>{Name}</td>
<td>{Desc}</td>
</tr>
</tpl>
</tbody>
</table>
</div>
</ext:XTemplate>
再加上这个比较Cool的table样式就基本上完成了:
复制代码 代码如下:
body, table.t1
{
font-size: 12px;
}
table.t1
{
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: 0 auto;
}
td
{
height: 20px;
}
h1, h2, h3
{
font-size: 12px;
margin: 0;
padding: 0;
}
table.t1
{
border: 1px solid #cad9ea;
color: #666;
}
table.t1 th
{
background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
background-repeat: repeat-x;
height: 22px;
}
table.t1 td, table.t1 th
{
border: 1px solid #cad9ea;
padding: 0 1em 0;
}
table.t1 tr.a1
{
background-color: #f5fafe;
}
Enjoy yourself！
完整的代码：
Html
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://panyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Mobile { get; set; }
public string Email { get; set; }
public string WebPage { get; set; }
public string Notes { get; set; }
public DateTime TranDate { get; set; }
}
}
最新文章
热门文章
猜你喜欢
