一：怎么动态增加TreePanel的子级 和怎么获得TreePanle树的值
前台：
（1）
var store = App.TreePanel1.getStore(), node = store.getNodeById("Node1");
node.appendChild({ text : "The New Node",
leaf : true
})（2）
var sm = App.TreePanel1.getSelectionModel(); selectedNode,
parentNode;
if (sm.hasSelection()) { selectedNode = sm.getSelection()[0],
parentNode = selectedNode.parentNode;
}后台
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server">
protected void GetSelectedNode(object sender, DirectEventArgs e)
{
TreeSelectionModel sm = this.TreePanel1.GetSelectionModel() as TreeSelectionModel;
string msg = "no selection";
if (sm.SelectedNodes != null)
{
SubmittedNode node = sm.SelectedNodes[0];
msg = node.Text;
}
X.Msg.Alert("GetSelectedNode", msg).Show();
}
protected void AddNode(object sender, DirectEventArgs e)
{
Node node = new Node()
{
Text = "NEW NODE",
Leaf = true
};
this.TreePanel1.GetNodeById("Root").AppendChild(node);
}
</script>
<!DOCTYPE html> <html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" AutoHeight="true">
<Root>
<ext:Node NodeID="Root" Text="Root (level 0)" Expanded="true">
<Children>
<ext:Node Text="Node1 (level 1)" Expanded="true">
<Children>
<ext:Node Text="Node1 (level 2)" Expanded="true">
<Children>
<ext:Node Text="Node1 (level 3)" Leaf="true" />
<ext:Node Text="Node2 (level 3)" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Node2 (level 1)" Expanded="true">
<Children>
<ext:Node Text="Node1 (level 2)" Expanded="true">
<Children>
<ext:Node Text="Node1 (level 3)" Leaf="true" />
<ext:Node Text="Node2 (level 3)" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<SelectionModel>
<ext:TreeSelectionModel runat="server" />
</SelectionModel>
</ext:TreePanel>
<ext:Button runat="server" Text="Get Selected Node" OnDirectClick="GetSelectedNode" />
<ext:Button runat="server" Text="Add node" OnDirectClick="AddNode" />
</form>
</body>
</html>
二：动态创建TreePanel 并创建其上面创建button事件(不能有
if (!X.IsAjaxRequest))<%@ Page Language="C#" %> <script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var tree = new TreePanel
{
ID = "TreePanel1",
Title = "Test",
ButtonAlign = Alignment.Left
};
var root = new Ext.Net.TreeNode()
{
AllowDrag = false,
Text = "Form Name",
Expanded = true
};
tree.Root.Add(root);
var saveButton = new Ext.Net.Button
{
ID = "saveDef",
Icon = Icon.Disk,
Text = "Save Changes",
};
saveButton.Listeners.Click.Handler = "#{TreePanel1}.submitNodes();";
tree.Buttons.Add(saveButton);
Panel1.Items.Add(tree);
}
protected void SubmitNodes(object sender, SubmitEventArgs e)
{
X.Msg.Alert("Submit", "You have submitted " + e.RootNode.Children.Count + " nodes").Show();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel ID="Panel1" runat="server" />
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<title>Ext.NET Example</title> <script type="text/javascript">
</script> </head> <body> <form runat="server">
<ext:ResourceManager runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" Height="300">
<Root> <ext:TreeNode Text="Composers" Expanded="true" Checked="False">
<Nodes> <ext:TreeNode Text="Beethoven" Expanded="true" Checked="False">
<Nodes> <ext:TreeNode Text="Concertos" Expanded="true" Checked="False">
<Nodes> <ext:TreeNode Text="Concert 1" Checked="False" />
<ext:TreeNode Text="Concert 2" Checked="False" />
</Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Root> <Buttons> <ext:Button runat="server" Text="Check all">
<Listeners> <Click Handler="#{TreePanel1}.getRootNode().cascade(function(n){n.ui.toggleCheck(true);});" />
</Listeners> </ext:Button> <ext:Button runat="server" Text="Uncheck all">
<Listeners> <Click Handler="#{TreePanel1}.getRootNode().cascade(function(n){n.ui.toggleCheck(false);});" />
</Listeners> </ext:Button> </Buttons> </ext:TreePanel> </form> </body> </html>四:TreePanel树后台创建事件并运行前端的JS
<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server">
protected void TestDirectEventHandler(object sender, DirectEventArgs e)
{
Ext.Net.TreeNodeCollection nodes = new Ext.Net.TreeNodeCollection();
Ext.Net.TreeNode node = new Ext.Net.TreeNode("p1", "picture Name", Icon.PictureLink);
node.Leaf = true;
nodes.Add(node);
X.Js.AddScript("#{TreePanel1}.getSelectionModel().getSelectedNode().loadNodes(eval(" + nodes.ToJson() + "));");
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TreePanel
ID="TreePanel1"
runat="server"
AutoHeight="true"
RootVisible="false">
<Root>
<ext:TreeNode Text="Root" Expanded="true">
<Nodes>
<ext:AsyncTreeNode Text="Node1" />
<ext:AsyncTreeNode Text="Node2" />
</Nodes>
</ext:TreeNode>
</Root>
</ext:TreePanel>
<ext:Button runat="server" Text="Test" OnDirectClick="TestDirectEventHandler" />
</form>
</body>
</html>
五：后台运行前台代码提示加载
X.Js.AddScript("Ext.net.Mask.show('Executing...'); ");
X.Js.AddScript("Ext.net.Mask.hide();");
X.Js.AddScript("Ext.net.Mask.hide();");
六：后台运行前台JS代码
.cs
X.Call("clearFields");.js
var clearFields = function () { Ext.Msg.notify("Info.", "I'm here...");
}七：JS调用后台的方式
第一种方法：也是大多人用的方法：
1.资源管理器中起来别名：DirectMethodNamespace="X"
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"/>
2.在js方法中这样调用
X.方法名();
第二种方法：我个人推荐的
在js中直接调用后台方法不需要走别名
App.direct.方法名();
千万要记住在后台方法一定要标记为： [DirectMethod]
八：Ext.Net弹出窗口回写父窗口
用parent.App.就可以找到某个控件进行操作。
parent.App.sss.setValue(t);
parent.App.winSetting.hide();
九：Ext.Net:Panel增加背景图
<ext:Panel runat="server" ID="Panel1" BodyStyle="background:url(/Resources/images/Desktop/1.jpg) left bottom repeat-x;">
<Items>
</Items>
</ext:Panel>
十：动态增加CheckboxGroup选项
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server">
protected void AddCheckboxClick(object sender, DirectEventArgs e)
{
((Ext.Net.Button)sender).Disabled = true;
CheckboxGroup1.Items.Add(new Checkbox { BoxLabel = "Checkbox 4", Checked = true });
CheckboxGroup1.Render(CheckboxGroup1.ContainerID, RenderMode.RenderTo);
}
protected void AddAnotherCheckboxClick(object sender, DirectEventArgs e)
{
((Ext.Net.Button)sender).Disabled = true;
// we have to recreate any previous dynamic added checkboxes
CheckboxGroup1.Items.Add(new Checkbox { BoxLabel = "Checkbox 4", Checked = true });
CheckboxGroup1.Items.Add(new Checkbox { BoxLabel = "Checkbox 5", Checked = true });
CheckboxGroup1.Render(CheckboxGroup1.ContainerID, RenderMode.RenderTo);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:CheckboxGroup
ID="CheckboxGroup1"
runat="server"
ColumnsNumber="1">
<Items>
<ext:Checkbox runat="server" BoxLabel="Checkbox 1" />
<ext:Checkbox runat="server" BoxLabel="Checkbox 2" />
<ext:Checkbox runat="server" BoxLabel="Checkbox 3" />
</Items>
</ext:CheckboxGroup>
<ext:Button
runat="server"
Text="Add checkbox"
OnDirectClick="AddCheckboxClick" />
<ext:Button
runat="server"
Text="Add another checkbox"
OnDirectClick="AddAnotherCheckboxClick" />
</form>
</body>
</html>
十一：后台创建Window以及设定其属性
protected void Page_Load(object sender, EventArgs e)public static Window CreateWindow(string wId, string wTitle, string wUrl)
{
CreateControl.CreateWindow("winCharacter", "角色选择", "../CommonWindow/CharacterSelection.aspx").Render(this.Form);
}
{
var win = new Window
{
ID = wId,
Title = wTitle,
Width = 530,
Height = 410,
Hidden = true,
X = 50,
Y = 130
};
win.AutoLoad.Url = wUrl;
win.AutoLoad.Mode = LoadMode.IFrame;
return win;
}
十二：子窗口给父窗口控件赋值
子窗口给父窗口控件赋值：parent.父窗口控件ID.setValue(value)。
但是如果你的控件ID是通过后台代码组合而成，出来的控件ID可能就是一串字符串，此时要注意了：要使用parent.eval（）方法把相关字符串转换成Ext对象。例如
control=“txtUserName”；
parent.eval(control).setValue(value);
十三：CheckboxGroup 勾选、全选、反选和限制勾选
<script type="text/javascript" defer="defer">
ConstraintChkedNum = 3; // 自定义限制勾选的数量
chkedId = [];
var checkWeek = {
SelectedAll: function(chkGrp) {
var idx;
var cbAll = Ext.getCmp(chkGrp.items.items[chkGrp.items.length - 2].id);
for (idx = 0; idx < chkGrp.items.length - 1; idx++) {
var cb = Ext.getCmp(chkGrp.items.items[idx].id);
cb.setValue(cbAll.checked);
}
},
Unselected: function(chkGrp) {
var idx;
for (idx = 0; idx < chkGrp.items.length - 2; idx++) {
var cb = Ext.getCmp(chkGrp.items.items[idx].id);
cb.setValue(!cb.checked);
}
},
SelectedConstraint: function(chk) {
if (chkedId.length >= ConstraintChkedNum) {
if (chkedId.join(',').match(chk.id) && !chk.checked) {
chkedId.remove(chk.id)
}
else {
alert('最多勾选 ' + ConstraintChkedNum + ' 项.');
chk.suspendEvents();
chk.setValue(false);
chk.resumeEvents();
}
}
else {
if (chk.checked) chkedId.push(chk.id);
else chkedId.remove(chk.id);
}
}
}
</script>
HTML文档
<h1>
勾选全选反选</h1>
<ext:CheckboxGroup ID="Weeks" runat="server" Width="500" Height="50">
<Items>
<ext:Checkbox ID="Checkbox1" runat="server" Name="Checkbox1" BoxLabel="周一" />
<ext:Checkbox ID="Checkbox2" runat="server" Name="Checkbox1" BoxLabel="周二" />
<ext:Checkbox ID="Checkbox3" runat="server" Name="Checkbox1" BoxLabel="周三" />
<ext:Checkbox ID="Checkbox4" runat="server" Name="Checkbox1" BoxLabel="周四" />
<ext:Checkbox ID="Checkbox5" runat="server" Name="Checkbox1" BoxLabel="周五" />
<ext:Checkbox ID="Checkbox6" runat="server" Name="Checkbox1" BoxLabel="周六" />
<ext:Checkbox ID="Checkbox7" runat="server" Name="Checkbox1" BoxLabel="周日" />
<ext:Checkbox ID="Checkbox8" runat="server" Name="Checkbox1" BoxLabel="全选">
<Listeners>
<Check Handler="checkWeek.SelectedAll(#{Weeks})" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox9" runat="server" Name="Checkbox1" BoxLabel="反选">
<Listeners>
<Check Handler="checkWeek.Unselected(#{Weeks})" />
</Listeners>
</ext:Checkbox>
</Items>
</ext:CheckboxGroup>
<h1>
限制勾选</h1>
<ext:CheckboxGroup ID="WeeksConstr" runat="server" Width="500" Height="200">
<Items>
<ext:Checkbox ID="Checkbox10" runat="server" Name="Checkbox1" BoxLabel="周一">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox11" runat="server" Name="Checkbox1" BoxLabel="周二">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox12" runat="server" Name="Checkbox1" BoxLabel="周三">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox13" runat="server" Name="Checkbox1" BoxLabel="周四">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox14" runat="server" Name="Checkbox1" BoxLabel="周五">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox15" runat="server" Name="Checkbox1" BoxLabel="周六">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
<ext:Checkbox ID="Checkbox16" runat="server" Name="Checkbox1" BoxLabel="周日">
<Listeners>
<Check Fn="checkWeek.SelectedConstraint" />
</Listeners>
</ext:Checkbox>
</Items>
</ext:CheckboxGroup>
值得注意的是，chk.suspendEvents() 和 chk.resumeEvents() 是挂起和恢复 checkbox 控件的事件。
十四：ext.net GridPanel 加上悬浮提示
在ext.net中，常常遇到某一列不够宽，毕竟业务都是变的很快的，所以我们可以在悬浮某一列的时候给其加上tips，这样就算再多的内容也不怕了。
下面介绍2中加tips的方式：
1、只想给指定列加tips
a、c#代码
<ext:Column ColumnID="INTICKET_PTTI" DataIndex="INTICKET_PTTI" Header="检票口" Width="90" Align="Center" Wrap="true"> <Renderer Fn="RenderRow" /> </ext:Column>
b、js代码
function RenderRow(value, meta, rec, rowIndex, coIndex, ds) { if (value != null && value != "") { var tips = "<div ext:qtitle='' ext:qtip='" + value + "'>" + value + "</div>"; return tips; } };
2、给所有列加上tips
a、在GridPanel外面加上
<ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}" Delegate=".x-grid3-cell" TrackMouse="true" AutoWidth="true" AutoHeight="true"> <Listeners> <Show Fn="showTip" /> </Listeners> </ext:ToolTip>
b、js代码
var showTip = function () { var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement), cellIndex = GridPanel1.view.findCellIndex(this.triggerElement), record = Store1.getAt(rowIndex), fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex), data = record.get(fieldName); this.body.dom.innerHTML = data; };
如此这般那般就好了。
十五：ext.net 日期控件默认赋值
我们一般进入某个页面的时候，日期时间都已经赋好值了，这样能一目了然当前页面的数据是哪一个时间段内的。ext.net的DateField默认没有赋值的属性，只能通告其他的途径来赋值。
<ext:DateField runat="server" ID="dfProdDate" FieldLabel="生产日期" LabelWidth="80" Width="200"
LabelAlign="Right" Format="Y-m-d H:i:s" EmptyText="请选择生产日期" AllowBlank="false">
|
Format是日期控件的值的格式
AllowBlank="false"代表这个控件不能为空，必须输入值
其他属性碰到一个讲一个
下面说如何给这个控件默认赋默认值
直接在body中添加以下代码即可：
<ext:ResourceManager ID="ScriptManager1" runat="server" Theme="Gray" />
<%
dfProdDate.Value = string.Format("{0:yyyy-MM-dd HH:mm:ss}", DateTime.Now);
%>
|
十六：ext.net 控件后加文字
在ext.net中有控件前加文字采用 FieldLabel="***"，如何在后面加文字呢，直接的属性是没有的，只能通过写js。
<ext:TextField runat="server" ID="txCheckCrycle" FieldLabel="保修周期" Width="200" LabelWidth="80"
Regex="^(0|([1-9]\d*))(\.\d+)?$" MaxLength="8">
<Listeners>
<Render Fn="addText" />
</Listeners>
</ext:TextField>
|
Regex 是正则验证，我这里验证是否输入的是数字，
MaxLength最大长度只能是8位
Listeners 监听事件，主要是用来写js的。
我这里加了一个 <Render Fn="addText" />
var addText = function () {
var _parentNode = Ext.getDom('txCheckCrycle').parentNode;
Ext.get(_parentNode).createChild(
{
tag: 'span',
html: ' 月'
}
);
}
|
这样就在控件的后面加了一个“月”的文字。
十七：Panel展开刷新 关闭清除
<ext:Panel ID="pnlExamineList" runat="server" Collapsible="true" Header="true" Icon="UserFemale"
Border="true" Title="审批历史" Height="200">
<AutoLoad Url="/FormServerTemplates/ExamineList.aspx" NoCache="true" Mode="IFrame"
ShowMask="true" />
<Listeners>
<Expand Handler="this.reload();" />
<Collapse Handler="this.clearContent();" />
</Listeners>
</ext:Panel>
十八：页面跳转提示
X.Redirect("/FormServerTemplates/DownLoad.aspx", "请稍候，下载马上就开始了...");
十九：其它几个注意的问题
1.如果对gridpanel要多获取选中记录的操作，操作在服务端，如果采用RowSelectionModel sm = skcs_Grid.SelectionModel.Primary as RowSelectionModel;
这种形式，请注意，将gridpanel的SelectionMemory设置为"Disabled"，否则将会重复提交记录，该开关可以在会回发后保持选中状态
2.Ext.net TreePanle 如何刷新呢？例如TreePlanle的ID为T1，不是T1.reload(),而是T1.root.reload();
3.ext:FileUploadField 浏览按钮不显示
这是bug，解决方案为：添加css
<style type="text/css">
.ext-ie .button-fix table.x-btn,
.ext-gecko .button-fix table.x-btn{
top:0px;
}
.ext-ie .button-fix .x-form-text,
.ext-gecko .button-fix .x-form-text{
margin-top:1px;
}
</style> |
<ext:FileUploadField ID="UpFile" runat="server" ButtonText="浏览" AllowBlank="false" EmptyText="请选择文件" Width="200" CtCls="button-fix" Icon="LinkAdd"/>
|
4.清空GridPanel的checkbox选中行，GridPanel.getSelectionModel().clearSelections();可以清空选中状态
5.Ext.net1.1目前暂不支持MVC3.0的Razor引擎模式。
二十：RadioGroup当选择改变时响应事件
<%@ Page Language="C#" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><script runat="server">
protected void RadioGroup_Change(object sender, DirectEventArgs e)
{
RadioGroup rg = sender as RadioGroup;
X.Msg.Alert("Change", rg.CheckedItems[0].ID).Show();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:RadioGroup runat="server" ColumnsNumber="1">
<Items>
<ext:Radio ID="Radio1" runat="server" Checked="true" />
<ext:Radio ID="Radio2" runat="server" />
</Items>
<DirectEvents>
<Change OnEvent="RadioGroup_Change" />
</DirectEvents>
</ext:RadioGroup>
</form>
</body>
</html>
二十一：动态生成控件，无法取得控件的值：
1、动态生成控件，无法取得控件的值：
protected void Page_Init(object sender, EventArgs e)
{
ComboBox cmbTest = new ComboBox();
cmbTest.ID = "cmbTest";
InitBooleanDrop(cmbTest);
cmbTest.DirectSelect += new ComponentDirectEvent.DirectEventHandler(cmbTest_DirectSelect);
this.Page.Controls.Add(cmbTest);
}
private void InitBooleanDrop(ComboBox cmb)
{
ListItem item = new ListItem();
item.Text = "---请选择---";
item.Value = "0";
cmb.Items.Add(item);
item = new ListItem();
item.Text = "Y";
item.Value = "1";
cmb.Items.Add(item);
item = new ListItem();
item.Text = "N";
item.Value = "2";
cmb.Items.Add(item);
cmb.SelectedItem.Text = cmb.Items[0].Text;
}
//不能取得选择的值
void cmbTest_DirectSelect(object sender, DirectEventArgs e)
{
ComboBox cmb = (ComboBox)sender;
X.Msg.Alert(cmb.SelectedItem.Text, cmb.SelectedItem.Value).Show();
}
|
测试了好久，其实问题就出在这句：
this.Page.Controls.Add(cmbTest);
将其改为以下这句就好了：
this.form1.Controls.Add(cmbTest);
二十二：JS获得GridPanel 选中的IDs值
<%@ 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)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "testId1", "test1", "test2" },
new object[] { "testId2", "test3", "test4" },
new object[] { "testId3", "test5", "test6" },
};
store.DataBind();
}
}
protected void ShowSelectedIds(object sender, DirectEventArgs e)
{
string[] s = JSON.Deserialize<string[]>(e.ExtraParams["selectedIds"]);
X.Msg.Alert("Count", String.Format("Count: {0}; ids : {1}", s.Length, e.ExtraParams["selectedIds"])).Show();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var getSelectedIds = function (grid) {
var selectedIds = grid.selectedIds,
arrayOfSelectedIds = [];
for (var id in selectedIds)
{
arrayOfSelectedIds.push(id);
}
return arrayOfSelectedIds;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader IDProperty="testId">
<Fields>
<ext:RecordField Name="testId" />
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="TestId" DataIndex="testId" />
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" PageSize="1" />
</BottomBar>
</ext:GridPanel>
<ext:Button runat="server" Text="Show selected ids">
<DirectEvents>
<Click OnEvent="ShowSelectedIds">
<ExtraParams>
<ext:Parameter
Name="selectedIds"
Value="getSelectedIds(GridPanel1)"
Mode="Raw"
Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html>
二十三 修改控件的样式
<%@ Page Language="C#" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!DOCTYPE html><html>
<head runat="server">
<title>Ext.NET Examples</title>
<style>
.ux-btn button {
font-size: 13px;
font-weight: bold;
height: 30px;
width:90px;
color: #003867;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Theme="Gray" />
<ext:Button runat="server" Text="MyButton" CtCls="ux-btn"></ext:Button>
</form>
</body>
</html>
二十四 后台新建控件跟事件 此代码为1。0版（修改一下新版也可以用）
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %><head id="Head1" runat="server">
<title>Test Page</title>
<script runat="server">
private Coolite.Ext.Web.Label label1;
private CheckboxGroup group;
protected void Page_Init(object sender, EventArgs e)
{
group = new CheckboxGroup();
group.Width = Unit.Pixel(600);
group.Height = Unit.Pixel(200);
this.Form.Controls.Add(group);
group.Items.Add(new Checkbox(true, "Item1"));
group.Items.Add(new Checkbox(true, "Item2"));
group.Items.Add(new Checkbox(false, "Item3"));
group.Items.Add(new Checkbox(true, "Item4"));
group.Items.Add(new Checkbox(false, "Item5"));
Coolite.Ext.Web.Button b = new Coolite.Ext.Web.Button();
b.Text = "Submit";
b.AjaxEvents.Click.Event += Click_Event;
this.Form.Controls.Add(b);
label1 = new Coolite.Ext.Web.Label();
this.Form.Controls.Add(label1);
}
void Click_Event(object sender, AjaxEventArgs e)
{
StringBuilder sb = new StringBuilder();
foreach (Checkbox checkbox in group.Items)
{
sb.AppendFormat("<p>{0} - {1}</p>", checkbox.BoxLabel, checkbox.Checked);
}
label1.Html = sb.ToString();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="SM1" runat="server" />
</form>
</body>
</html>