一:怎么动态增加TreePanel的子级 和怎么获得TreePanle树的值
前台:
(1)
var store = App.TreePanel1.getStore(),
node = store.getNodeById("Node1");
node.appendChild({
text : "The New Node",
leaf : true
})
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
>
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>
<%@ 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.hide();");
X.Call("clearFields");
var clearFields = function () {
Ext.Msg.notify("Info.", "I'm here...");
}
第一种方法:也是大多人用的方法:
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
>
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;
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
>
<%@ 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
>