最近几年比较火的前端js框架extjs 算是其中的佼佼者。统一的UI设计,强悍的组件及丰富的插件,对浏览器良好的兼容性等优点使得许多公司使用Extjs,同时也使得无数程序猿开始研究这个玩意也包括我在内。废话不多说,我们来看看extjs和extnet 是什么东东。

  用过的extjs 的程序猿,恐怕都有五味杂陈的感受。有时为了一个特殊的功能,不知耗费多少心血。甚至一不小心少写了括号找了半天,让人抓狂。当然这里排除那些代码天才。平心而论extjs开发是有难度的。要用好它,要学的东西真不少。CSS,html,js,服务器脚本语言(php,java,asp.net)。不要以为有js框架就不用关注那些css,html了,等哪天老板说”我要这种功能,这种效果。“  哈哈,就懂了。那么问题来了,怎样降低这个开发难度呢?就有这个公司搞了个Ext.Net ,再extjs 上狠狠的封装了一下。有多狠,Ext.net(2.5).dll,居然有125MB。 让无数开发者仿佛一下子回到了asp.net 拖控件的时代。历史就是这样,重复着造轮子。。。

 在Extjs窗口这样写的:

Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
}
}).show();

ext.net 是这样写的:

<ext:Window
ID="Window1"
runat="server"
Title="Hello World"
Icon="Application"
Height="185"
Width="350"
BodyStyle="background-color: #fff;"
BodyPadding="5"
Modal="true">
<Content>
This is my first <a target="_blank" href="http://www.ext.net/"> Ext.NET</a> Window.
</Content>
</ext:Window>

在写代码上,使用vsIED开发环境Ext.net 有智能提示(通过设置extjs也可以),但是你要是把ext.net属性设置错了或者其他错, 编译时直接给你个报个错。不改正确都不行。从这点上来说对程序员来说确实是个福音。

下面来看下注册事件的区别:extjs 这么写

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {//看这里!
alert('You clicked the button!');
}
});

还可用”on()“ 方法注册事件。Ext.Net 长什么样呢,如下所示:

<ext:ImageButton
runat="server"
ImageUrl="button.gif"
OverImageUrl="overButton.gif"
DisabledImageUrl="disabled.gif"
PressedImageUrl="pressed.gif">
<DirectEvents> //这里hock 后台事件
<Click OnEvent="Button_Click" />
</DirectEvents>
<Listeners>
<Click Handler="*这里你可以写js代码处理*"/>
</Listeners>
</ext:ImageButton>

这里是后台代码

<script runat="server">
protected void Button_Click(object sender, DirectEventArgs e)
{
X.Msg.Alert("Server Time", DateTime.Now.ToLongTimeString()).Show();
}
</script>

  事件就简单到这里,下面说两者的性能差异。整体上来说,extnet是包装过的性能肯定有所下降。据自己开发时体会,Ext.net事件交互上本质是使用extjs的DirectEvent,大量的事件交互,导致了许多不必要的服务器请求。这是导致性能不佳一个很重要的原因。而extjs许多处理直接通过前台js代码控制,规避了这类问题。

  再来介绍下大家比较关心的东西,收不收费? extjs 是开源的,需要遵守GNU协议的。而extnet用于商业盈利需要收费的。具体的细节的看下他们的说明。

  好了简单介绍到这里吧。具体选择哪种组件开发,需要结合实际情况慎重考虑。

  新的一年,给广大程序猿一个福利。在开发extjs或者extnet时都不免查看api文档。查看官方网站时,会发现只要在从天朝访问外国网站都比较卡,有时还无法访问。为此博主决定改变一下。查看在线api文档请点击这里: http://api.movivi.cn。为了程序员更好写代码,我也是蛮拼的,希望这能够帮助到你。

关于Ext.js和Ext.Net的杂谈的更多相关文章

  1. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  2. Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

    此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...

  3. Ext JS学习第八天 Ext基础之 认识Ext.js 和Ext-more.js

    此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究 ...

  4. 【翻译】Sencha Ext JS 5公布

    原文:Announcing Sencha Ext JS 5 简单介绍 我代表Sencha和整个Ext JS团队,非常自豪的宣布,在今天,Sencha Ext JS 5公布了.Ext JS 5已经迈出了 ...

  5. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  6. Ext Js详解指南

    什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...

  7. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  8. 【翻译】Ext JS 6早期访问版本发布

    早期访问版本是什么 如何参与 都包括什么 Sencha Ext JS 6 Sencha Pivot Grid Sencha Cmd 6 JetBrains IDE插件 反馈 原文:Announcing ...

  9. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

随机推荐

  1. Java常用Json库性能对比

    Java对于处理JSON数据的序列化与反序列化目前常用的类库有Gson.FastJSON.Jackson.jettison以及json-lib.在这里我们将对这些类库在json序列化与反序列化方面的性 ...

  2. spring@Autowired注入为null的问题,2017年9月14日21点41分记录

    这个小问题纠结了三个小时..发出来留个纪念 这是启动项目的时候 这是请求控制器的时候   图1注入的时候是null,图2请求控制器的时候是有的,这是因为图1debug的地方是构造器..autowire ...

  3. UIRecorder安装与使用

    继vue单元测试,将进行vue的e2e测试学习. 学习点: 安装uirecorder 用工具(UI Recorder)录制测试脚本 测试脚本的回放 本文意在安装UI Recorder,并且利用该工具进 ...

  4. JavaScript类型操作以及一些规范

    类型检测 类型检测优先使用 typeof.对象类型检测使用 instanceof.null 或 undefined 的检测使用 == null. // string typeof variable = ...

  5. css渲染(三)颜色与背景

    颜色的应用主要分为前景色.背景色和透明三个部分. 一.前景色 color color前景色 值: <color> | inherit 初始值: 用户代理特定的值 应用于: 所有元素 继承性 ...

  6. Django聚合函数

    Django在Django .db中提供了以下聚合函数. 1.Avg:返回平均值 class Avg(expression, output_field=FloatField(), filter=Non ...

  7. note04-计算机网络

    4.WLAN无线局域网(wareless local area network) IEEE802.11无线以太网协议标准 基础服务集合BSS 基站AP 服务服务集合标识SSID 即wifi名 分配系统 ...

  8. python:pymysql模块使用

    一,基本使用 # 导入pymysql模块 import pymysql # 连接database conn = pymysql.connect(host=“你的数据库地址”, user=“用户名”,p ...

  9. caffe实现focal loss层的一些理解和对实现一个layer层易犯错的地方的总结

    首先要在caffe.proto中的LayerParameter中增加一行optional FocalLossParameter focal_loss_param = 205;,然后再单独在caffe. ...

  10. Spring Boot 配置文件详解:Properties和YAML

    一.配置文件的生效顺序,会对值进行覆盖: 1. @TestPropertySource 注解 2. 命令行参数 3. Java系统属性(System.getProperties()) 4. 操作系统环 ...