Coolite Toolkit 笔记四

Coolite Toolkit 基本控件

 

一、按扭(Button)控件

Coolite Toolkit里同样提供有四种Button控件,他们分别是Button、ImageButton、LinkButton和SplitButton。

 

触发同步事件:

<ext:Button ID="Button1" runat="server" Text="点我" AutoPostBack="True" onclick="Button1_Click" />


使用Listeners为控件添加客户端方法:

<ext:Button ID="Button2" runat="server" Text="点我">
    
<Listeners>
        
<Click Handler="onClientClick()" />
    
</Listeners>
</ext:Button>
<script type="text/javascript">
    
function onClientClick() {
        alert(
"Hello");
    }
</script>


使用AjaxEvents为控件添加Ajax处理方法:

<ext:Button ID="Button3" runat="server" Text="点我">
    
<AjaxEvents>
        
<Click OnEvent="Button3_Click">
            
<EventMask ShowMask="true" />
        
</Click>
    
</AjaxEvents>
</ext:Button>

 

/******************************************************/
protected void Button3_Click(object sender, AjaxEventArgs e)
{
    Ext.Msg.Alert("标题", "显示的消息内容").Show();
}

 


另外还有一个重要的特性就是按扭菜单项,可以给一个按扭添加菜单选项,使用如下:

<ext:Button ID="Button4" runat="server" Text="点我">

    <Menu>
        <ext:Menu runat="server">
            <Items>
                <ext:MenuItem ID="MenuItem1" Text="菜单项" runat="server"></ext:MenuItem>
            </Items>
        </ext:Menu>
    </Menu>
</ext:Button>


ImageButton通过设置按扭的图片让按扭呈现出不同的风格

<ext:ImageButton ID="ImageButton1" 
    runat="server" 
    ImageUrl="button/button.gif" 
    OverImageUrl="button/overButton.gif" 
    DisabledImageUrl="button/disabled.gif" 
    PressedImageUrl="button/pressed.gif">
    <AjaxEvents>
        <Click OnEvent="Button3_Click" />
    </AjaxEvents>
</ext:ImageButton>


二、TextFiled控件

TextFiled控件等同于ASP.NET里的TextBox控件,主要进行文字数据录入或显示,NumberFiled控件专们用来进行数字录入的。EmptyText属性用来设置或获取显示输入数据提示信息。Note属性用来设置或获取静态描述信息,并可以通过NoteAlign属性设置信息的显示位置。


三、DataFiled控件

SelectedData属性得到所选择的日期


四、ComboBox控件

 ComboBox控件的基本功能和.NET标准控件的DropDownList控件相同,不同之处在于DropDownList只能选择,不能进行编辑录入,如果用户需要一个既可手工输入又可以选择的功能来做条件筛选,DropDownList则实现不了,Coolite Toolkit正好弥补上了DropDownList的不足。使用方式两者都相差不大,下面是一个简单的示例:

<ext:ComboBox ID="ComboBox1" runat="server">
    
<Items>
        
<ext:ListItem Text="电信" Value="电信"/>
        
<ext:ListItem Text="移动" Value="移动"/>
        
<ext:ListItem Text="联通" Value="联通"/>
    
</Items>
</ext:ComboBox>


ComboxBox还提供了Triggers和Listeners

<ext:ComboBox ID="ComboBox2" runat="server" EmptyText="请选择或输入数据">
    
<Items>
        
<ext:ListItem Text="电信" />
        
<ext:ListItem Text="移动" />
        
<ext:ListItem Text="联通" />
    
</Items>
    
<Triggers>
        
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
    
</Triggers>
    
<Listeners>
        
<Select Handler="this.triggers[0].show();" />
        
<BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
        
<TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
    
</Listeners>
</ext:ComboBox>


五、FieldSet控件 

使用FieldSet来进行表单等界面布局分组

<ext:FieldSet ID="FieldSet1" runat="server" Collapsible="True" Height="200px" Title="FieldSet分组" Width="200px">
    
<Body>
        
<table border="0" cellpadding="0" cellspacing="0">
            
<tr>
                
<td>日期:</td>
                
<td>
                    
<ext:DateField ID="DateField2" runat="server"/>
                
</td>
            
</tr>
        
</table>
    
</Body>
</ext:FieldSet>


六、Panel控件

Coolite Toolkit所提供的Panel同样如此,只是他在ASP.NET的Panel基础上扩展了一些常用的功能点,包括动态设值,外嵌其他的Web也面等多项功能。

% --< ext:Panel ID = " Panel2 "  runat = " server "  Height = " 300 "  Title = " Title " >-- %>
< ext:Panel  ID ="Panel1"  runat ="server"  Height ="300"  Title ="Title"  
    Collapsible
="true"  Width ="300" >
    
< Body >
    
</ Body >
</ ext:Panel >


      同FieldSet控件一样直接提供了公开属性设置是否允许折叠。如上html代码片段,在<body>标签里可以放置我们需要在界面上呈现是元素,除此之外它还提供了一个属性(Html),通过该属性也可以设置其显示内容,如下:

< ext:Panel  ID ="Panel2"  runat ="server"  Height ="100"  Title ="Title"  
    Collapsible
="true"  Width ="300"  Html ="<h5>通过HTML属性设置其显示的内容</h5>" >
</ ext:Panel >

在使用该控件的时候需要注意,虽然<body>标签和Html属性都可以设置控件所呈现的内容,但是这里有一定的约束,<body>标签和Html属性不能同时使用。

 


通过属性设置其要呈现的内容,控件还提供了属性用来设置其将自动加载的数据(比如一个页面,类似与IFrame的功能)。

<ext:Panel ID="Panel3" runat="server" Height="100" Width="400" Title="Title">
    
<Body>
    
</Body>
</ext:Panel>
<script type="text/C#" runat="server">
    protected 
void Page_load(object sender, EventArgs e)
    {
        
this.Panel3.AutoLoad.Url = "http://xx.xx.xx.xx";
        
this.Panel3.AutoLoad.NoCache = true;
    }
</script>


<ext:Panel ID="Panel3" runat="server" Height="125px" Title="自动加载内容" 
    Width
="400px"  Collapsible="true">
    
<Body>
    
</Body>
    
<AutoLoad Url="http://xx.xx.xx.xx"></AutoLoad>
</ext:Panel>


 除了上面的实现方式外,也可以通过公开的方法LoadContent()实现动态加载一个页面呈现出来。

protected   void  Page_load( object  sender, EventArgs e)
{
    
this .Panel3.LoadContent( " http://beniao.cnblogs.com " true );
}


对Panel控件也提供了iframe的支持,Panel控件加载一个外部web页面也是可以以iframe的形式呈现的。

protected   void  Page_load( object  sender, EventArgs e)
{
    
this .Panel3.AutoLoad.Url  =   " http://xx.xx.xx.xx " ;
    
this .Panel3.AutoLoad.Mode  =  LoadMode.IFrame;
    
this .Panel3.AutoLoad.NoCache  =   true ;
}


      同样可以在LoadContent()方法中设置加载模式:

this .Panel3.LoadContent( new  LoadConfig( " http://xx.xx.xx.xx " , LoadMode.IFrame,  true ));


Coolite Toolkit的Panel的折叠展开功能也有他独有的特性,通过Listeners可以设置让其在展开的时候加载指定的Web页面,折叠的时候清除内容。

< ext:Panel  ID ="Panel4"  runat ="server"  Title ="展开时加载|折叠时清除"  Width ="300"  Height ="100"  Collapsible ="true" >
     
< AutoLoad  Url ="http://www.cnblogs.com"  Mode ="IFrame"  NoCache ="true"  ShowMask ="true"  MaskMsg ="正在加载" />
    
< Listeners >
        
< Expand  Handler ="this.reload();"   />
        
< Collapse  Handler ="this.clearContent();"   />
    
</ Listeners >
</ ext:Panel >

七、Window控件

 

窗体(Window)控件,这个控件多数时候是应用在做弹窗效果。

<ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application" 
    Title="Title">
    <body></body>
</ext:Window>


通过设置ShowOnLoad="false|true"属性使其在页面加载的时候显示与否。 在需要显示的时候可以通过调用其客户端API接口,也可以调用服务端API接口实现。

<ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application" 
    Title="Title" ShowOnLoad="false">
    <body></body>
    <Listeners>
        <Hide Handler="this.clearContent();" />
    </Listeners>
</ext:Window>
<ext:Button ID="btnShowWindow" runat="server" Text="显示Window">
    <Listeners>
        <%--<Click Handler="#{Window1}.show();" />--%>
    </Listeners>
    <AjaxEvents>
        <Click OnEvent="Show_Window"></Click>
    </AjaxEvents>
</ext:Button>
<script type="text/C#" runat="server">
    protected void Show_Window(object sneder, AjaxEventArgs e)
    {
        this.Window1.Show(); 
    }
</script>


      动态显示和隐藏(Show,Hide)、可拖拽性(Draggable)、(Modal)等。

<ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Application" Width="300" Draggable="false" Modal="true" Title="态|不可拖拽应用示例" ShowOnLoad="false">
    <body>
        态|不可拖拽应用示例<br />
        不可拖拽:Draggable="false"<br />
        摸态:Modal="true"<br />
    </body>
    <Listeners>
        <Hide Handler="this.clearContent();" />
    </Listeners>
</ext:Window>
<ext:Button ID="btnShowWindow" runat="server" Text="显示Window">
    <Listeners>
        <%--<Click Handler="#{Window1}.show();" />--%>
    </Listeners>
    <AjaxEvents>
        <Click OnEvent="Show_Window"></Click>
    </AjaxEvents>
</ext:Button>
<script type="text/C#" runat="server">
    protected void Show_Window(object sneder, AjaxEventArgs e)
    {
        this.Window1.Show(); 
        //this.Window1.Hide();
    }
</script>


 

八、控件Menu和MenuPanel

Coolite Toolkit规定Menu控件需要一个容器来做依托,而这个让Menu依托的控件就是MenuPanel

<ext:MenuPanel ID="MenuPanel1" runat="server" Height="300" Title="Menu" Width="185">
    
<Menu>
        
<Items>
            
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item1">
                
<Menu>
                    
<ext:Menu ID="Menu2" runat="server">
                        
<Items>
                            
<ext:MenuItem ID="MenuItem2" runat="server" Text="SubItem1">
                            
</ext:MenuItem>
                            
<ext:MenuItem ID="MenuItem3" runat="server" Text="SubItem2">
                            
</ext:MenuItem>
                        
</Items>
                    
</ext:Menu>
                
</Menu>
            
</ext:MenuItem>
            
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item2">
            
</ext:MenuItem>
            
<ext:MenuItem ID="MenuItem5" runat="server" Text="Item3">
            
</ext:MenuItem>
            
<ext:MenuItem ID="MenuItem6" runat="server" Text="Item4">
            
</ext:MenuItem>
        
</Items>
    
</Menu>
</ext:MenuPanel>

 
MenuPanel里可以放置菜单项(MenuItem),如果有子菜单,那么子菜单则对应于一个Menu控件,子菜单里的菜单项则又是通过菜单项(MenuItem)来体现。

 

后台代码实现如下:

protected void Page_Load(object sender, EventArgs e)
{
    
if (!IsPostBack)
    {
        CreateMenuPanel();
    }
}

 

private void CreateMenuPanel()
{
    MenuPanel menuPanel 
= new MenuPanel();
    menuPanel.Title 
= "帐套管理";
    menuPanel.Width 
= new Unit(180);

    Coolite.Ext.Web.MenuItem addAccount = new Coolite.Ext.Web.MenuItem("新增帐套");
    addAccount.Icon 
= Icon.Add;
    addAccount.Listeners.Click.Handler 
= "JavaScript:window.location.href='#';";
    
    Coolite.Ext.Web.MenuItem whAccount 
= new Coolite.Ext.Web.MenuItem("维护帐套");
    whAccount.Icon
=Icon.Cmy;

    Coolite.Ext.Web.MenuItem accountManage = new Coolite.Ext.Web.MenuItem("帐套管理");
    accountManage.Icon 
= Icon.Database;

    Coolite.Ext.Web.Menu subMenu = new Coolite.Ext.Web.Menu();

    Coolite.Ext.Web.MenuItem backMenuItem = new Coolite.Ext.Web.MenuItem("备份帐套");
    backMenuItem.Icon 
= Icon.DatabaseSave;
    backMenuItem.Listeners.Click.Handler 
= "JavaScript:window.open('#')";
    subMenu.Items.Add(backMenuItem);

    Coolite.Ext.Web.MenuItem reMenuItem = new Coolite.Ext.Web.MenuItem("恢复帐套");
    reMenuItem.Icon 
= Icon.DatabaseGo;
    reMenuItem.Listeners.Click.Handler 
= "JavaScript:window.open('#')";
    subMenu.Items.Add(reMenuItem);

    accountManage.Menu.Add(subMenu);

    menuPanel.Menu.Items.Add(addAccount);
    menuPanel.Menu.Items.Add(whAccount);
    menuPanel.Menu.Items.Add(accountManage);
    menuPanel.Menu.Listeners.ItemClick.Fn = "onItemClick";

    accountDiv.Controls.Add(menuPanel);
}

 

 

九、Accordion控件

Accordion的功能非常适用,使用很简单,轻轻松松的就可以构建一个可折叠的界面展示应用效果。

<ext:Panel ID="Panel1" runat="server" Height="300" Title="系统菜单" Width="200">
    
<Body>
        
<ext:Accordion ID="Accordion1" runat="server" Animate="true">
        
<ext:Panel ID="basePanel" runat="server" Border="false" Title="基础设置">
            
<Body>
            
</Body>
        
</ext:Panel>
        
<ext:Panel ID="accountPanel" runat="server" Border="false" Collapsed="true" Title="帐套管理">
            
<Body>
                
<div style="margin-left:50px;">
                    
<ul style="float:left;">
                        
<li>新增帐套</li>
                        
<li>维护帐套</li>
                        
<li>帐套备份</li>
                        
<li>帐套恢复</li>
                    
</ul>
                
</div>
            
</Body>
        
</ext:Panel>
        
<ext:Panel ID="userPanel" runat="server" Border="false" Collapsed="true" Title="用户管理">
            
<Body>
            
</Body>
        
</ext:Panel>
      
</ext:Accordion>
    
</Body>
</ext:Panel>


十、ToolBar和ToolTip控件

工具栏(ToolBar)以及动态提示(ToolTip),以方便用户操作。

<ext:Toolbar ID="Toolbar1" runat="server" Width="300">
    
<Items>
        
<ext:ToolbarButton ID="btnAdd" Text="新 增" Icon="UserAdd">
            
<ToolTips>
                
<ext:ToolTip ID="ToolTip1" Html="新增用户" runat="server" />
            
</ToolTips>
        
</ext:ToolbarButton>
        
<ext:ToolbarButton ID="btnEdit" Text="编 辑" Icon="UserEdit" Enabled="false"/>
        
<ext:ToolbarButton ID="btnDelete" Text="删 除" Icon="UserDelete" Enabled="false"/>
        
<ext:ToolbarSeparator runat="server"/>
        
<ext:ToolbarButton ID="btnRefresh" Text="刷 新" Icon="Reload" Enabled="false"/>
        
<ext:ToolbarSeparator runat="server"/>
        
<ext:ToolbarButton ID="tbSave" Text="保 存" Icon="Accept"/>
        
<ext:ToolbarButton ID="tbCancel" Text="取 消" Icon="Cancel"/>
    
</Items>
</ext:Toolbar>


           

 

      Coolite Toolkit的ToolBar控件功能非常强大,除了实现上面这种最基本的工具栏外,还可以设计出功能更加强大的。准确的说Coolite Toolkit为很多控件都提供了许多的功能扩展功能,这类控件主要是Tree、Menu 等等之类的控件。


<ext:Toolbar ID="Toolbar2" runat="server" Width="300">
    
<Items>
        
<ext:ToolbarButton runat="server" Text="下拉菜单" Icon="ArrowDown">
            
<Menu>
                
<ext:Menu ID="Menu1" runat="server">
                    
<Items>
                        
<ext:MenuItem ID="MenuItem1" runat="server" Text="博客园">
                            
<Menu>
                                
<ext:Menu runat="server">
                                    
<Items>
                                        
<ext:MenuItem Text="博客园" Href="http://www.cnblogs.com"/>
                                        
<ext:MenuItem Text="Beniao" Href="http://beniao.cnblogs.com"/>
                                    
</Items>
                                
</ext:Menu>
                            
</Menu>
                        
</ext:MenuItem>
                        
<ext:MenuSeparator runat="server"/>
                        
<ext:MenuItem ID="MenuItem2" runat="server" Text="选择日期" Icon="Calendar">
                            
<Menu>
                                
<ext:DateMenu ID="DateMenu1" runat="server">
                                    
<Picker ID="Picker1" runat="server">
                                        
<Listeners>
                                        
</Listeners>
                                    
</Picker>
                                
</ext:DateMenu>
                            
</Menu>
                        
</ext:MenuItem>
                    
</Items>
                
</ext:Menu>
            
</Menu>
        
</ext:ToolbarButton>
        
<ext:ToolbarButton Text="其他" runat="server" Icon="ApplicationHome" />
    
</Items>
</ext:Toolbar>


                  Coolite Toolkit 笔记四



你可能感兴趣的:(tool)