Ext.Net一些特别问题（有些未验证）

一：怎么动态增加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" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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>
 
 
三：Ext.NET控件TreePanel全选与反选
 
<%@ 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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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();");
 
 
六：后台运行前台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" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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)


        {


               CreateControl.CreateWindow("winCharacter", "角色选择", "../CommonWindow/CharacterSelection.aspx").Render(this.Form);


        }







        public static Window CreateWindow(string wId, string wTitle, string wUrl)
        {
            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" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<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" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

posted @ 2013-06-04 22:21 踏浪帅阅读(2364) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ext.Net一些特别问题（有些未验证）

HTML文档

公告