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  踏浪帅  阅读(2368)  评论(0)  编辑  收藏  举报