如何在VS2010中编写ExtJs--001
来源:互联网 发布:好爸妈点读机软件下载 编辑:程序博客网 时间:2024/09/21 11:21
1. 配置开发环境
先从环境配置说起,本文及后续IDE皆以VS2010环境示例。
下载Ext.Net,http://www.ext.net/download/
官方提供两个版本:社区版和专业版,这两个版本除了授权协议不一样外,对开发人员来说,没有任何区别。
顺便说一个问题,官方的要求的.NET Framework版本为3.5,其实需要装3.5SP1或直接4.0版本,因为Newtonsoft.Json.dll会对.NET Framework 3.5SP1中新增的一些地方有调用,所以建议开发环境为4.0版本。
配置VS工具箱
首先在VS中新建Web应用程序空项目,新建一个aspx页面,在工具箱中右键,新建选项卡,取名称为Ext.Net。在新建的选项卡中右键,选择项,浏览选择下载的Ext.Net.dll,如下图。
点“确定”后,刚才新建的选项卡中如下所示,
至此,选项卡添加完成。PS:Ext.NET系列的通病就是设计时支持相当糟糕,,从工具箱中拖拽控件用处不大,其次官方能给出的文档少之又少,还好,大部分可以参考Sencha Ext JS API文档。
2.配置Web.config
手动修改Web.config,添加httpModules节,完整代码如下
<?xml version="1.0"?><configuration> <system.web> <httpModules> <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" /> </httpModules> <compilation debug="true" targetFramework="4.0"> <assemblies> <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/> </assemblies> </compilation> </system.web></configuration>
3.从布局说起
从工具箱中拖拽一个ViewPort到在刚才新建的aspx页面Form1中,项目自动添加了对Ext.NET.DLL的引用,并在页面上面添加了如下代码,作用不解释,你懂得。
<%@Register Assembly="Ext.Net"Namespace="Ext.Net"TagPrefix="ext" %>
下来看看一个简单的录入界面布局。
在aspx文件源视图中修改页面代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Chapter1.WebForm1" %> <%@ 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>布局示例</title></head><body> <form id="form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server" /><%--必须有--%> <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout"><%--Layout="FitLayout" 拉伸布局--%> <Items> <ext:FormPanel runat="server" Frame="true" LabelWidth="40"><%--LabelWidth="40" Label宽40,根据Label文字总宽度手动设定--%> <Items> <ext:Container ID="Container1" runat="server" Layout="Column" Height="106" LabelAlign="Left"> <Items> <ext:Container ID="Container2" runat="server" ColumnWidth=".5" Layout="FormLayout" LabelWidth="40"><%-- Layout="FormLayout" Form布局,ColumnWidth=".5" 列宽50% --%> <Items> <ext:TextField runat="server" ID="txtName" FieldLabel="姓名" AnchorHorizontal="95%"/><%--AnchorHorizontal="95%",总体宽95% --%> <ext:RadioGroup runat="server" ID="rdoSex" FieldLabel="性别"> <Items> <ext:Radio runat="server" ID="rdoSexMen" BoxLabel="男士" /> <ext:Radio runat="server" ID="rdoSexWoman" BoxLabel="女士" /> </Items> </ext:RadioGroup> <ext:NumberField runat="server" ID="numAge" MinValue="1" FieldLabel="年龄" AnchorHorizontal="95%" /> <ext:TextField runat="server" ID="txtEmail" AllowBlank="false" FieldLabel="邮箱" AnchorHorizontal="95%" /> </Items> </ext:Container> <ext:Container ID="Container3" runat="server" ColumnWidth=".5" Layout="FormLayout" LabelWidth="40"> <Items> <ext:TextField runat="server" ID="txtCode" FieldLabel="编码" AnchorHorizontal="100%" /> <ext:TextField runat="server" ID="txtTl" FieldLabel="电话" AnchorHorizontal="100%" Disabled="true" /> <ext:ComboBox runat="server" ID="cmbProvince" FieldLabel="省份" AnchorHorizontal="100%" Editable="false" AllowBlank="false" /> <ext:DateField runat="server" ID="dfBirthDay" FieldLabel="生日" AnchorHorizontal="100%" Editable="false" AllowBlank="false" Format="yyyy-MM-dd" /> </Items> </ext:Container> </Items> </ext:Container> <ext:HtmlEditor runat="server" ID="txtIntro" AllowBlank="true" FieldLabel="简介" AnchorHorizontal="100%" AnchorVertical="-106" /> <%--AnchorVertical="-106" 缩回了106px,高度=页面总高-106,与Container1的Height对应,也就是此控件上面的总高度 --%> </Items> </ext:FormPanel> </Items> </ext:Viewport> </form></body></html>
常用的页面布局示例在官方示例中都有涉及到。
如下图,有13中布局可供参考。
- 如何在VS2010中编写ExtJs--001
- 如何在VS2010中编写ExtJs
- 如何在VS2010中编写ExtJs
- 如何在VS2010中更好的编写JavaScript代码
- 在VS2010单元测试中,Assert断言主要有那些功能?如何去编写代码测试?
- ExtJs中如何在事件中传值
- vs2010项目如何在vs2008中打开
- 如何在VS2010 + QT中调用CUDA
- 如何在VS2010中调试c代码
- 如何在VS2010中调用汇编代码
- 如何在VS2010中配置OpenGL
- 如何编写ExtJS自定义控件
- 在extjs中,如何改变combobox中store的值。
- 如何在PB中编写PING代码
- 如何在C#中编写多线程应用程序
- 如何在vc中编写 WebService
- 如何在vc中编写 WebService
- 如何在UltraEdit中编写javascript脚本
- .NET使用资源文件resx、Resources
- Mysql 导入MSSQL
- 如何用作业将MySQL数据导入MSSQL
- window.parent与window.openner区别
- Ext Designer 可视化设计器及汉化全攻略
- 如何在VS2010中编写ExtJs--001
- ASP.NET MSChart 入门 Title 详解 (一) .
- ASP.NET MSChart 入门 Legend 详解(二) .
- ASP.NET MSChart 入门 ChartArea 详解 (三) .
- [为梦想,千里行] 评论:35岁前买房没出息,说对了一半
- ASP.NET MSChart 入门 Series 详解 (四) .
- 在MSChart基础上的处理类库 .
- 个人开公司的流程,以后用得着
- 一个中国人的一天生活