关于Ext.js和Ext.Net的杂谈

  最近几年比较火的前端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。为了程序员更好写代码,我也是蛮拼的,希望这能够帮助到你。

时间: 2024-10-01 14:30:06

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

EXT.JS以下两种写法在初始载入时是一样的效果

/* Ext.application({ name: 'MyfirstApplication', launch: function () { Ext.Msg.alert("Hello", "My first App!"); } }); */ Ext.onReady(function () { //alert("This is my first Extjs app !"); //Ext.Msg.alert("Alert", &q

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

此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位置找到这几个扩展的js源码: •extjs-4.1.1\src\core\src\lang\ •ExtJS扩展原生Javascript –Ext.Object –Ext.Number –Ext.String –Ext.Array –Ext.Function –Ext.Date –Ext.Error

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

此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究. •如果所示:API位置 . •Ext.js方法详解: –Ext.apply&Ext.applyIf –Ext.extend –typeOf –isEmpty.isIterable.isFunction.isArray... –Iterate 下面从栗子中看看这些方法是实际使用方法,请看栗子代码吧

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

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析. 虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常

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

Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.

Ext JS 6学习文档–第2章–核心概念

核心概念 在下一章我们会构建一个示例项目,而在这之前,你需要学习一些在 Ext JS 中的核心概念,这有助于你更容易理解示例项目.这一章我们将学习以下知识点: 类系统,创建和扩展类 事件 Ext JS 对象的查询 容器 布局 转载请注明出处:http://www.jeeboot.com/archives/1217.html class system(类系统) Ext JS 提供了很多功能,使得它创建和处理类变得简单.以下是在 Ext JS 6 的类系统中的几大组成类: Ext Base Clas

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

早期访问版本是什么 如何参与 都包括什么 Sencha Ext JS 6 Sencha Pivot Grid Sencha Cmd 6 JetBrains IDE插件 反馈 原文:Announcing Ext JS 6 Early Access Release 在令人惊艳的SenchaCon 2015最后一周,我们非常兴奋,因为Ext JS 6早期访问版本要发布了.在Ext JS 6,可以使用单一的javascript框架来无缝的创建基于桌面.平板和智能手机的应用程序. 下载Ext JS 6早期

Ext.js入门:常用组件与综合案例(七)

一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Ext/resources/css/ext-all.css&

谈谈Ext JS的组件——容器与布局

概述 在页面中,比較棘手的地方就是布局.而要实现布局.就得有能维护布局的容器. 能够说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最优秀的一个,而这得益于它强大的容器类和丰富的布局类.在本文将介绍Ext JS的容器组合和布局类. 容器:Ext.container.Container 容器的主要功能是管理其内部的组件.因而在继承Ext.Component的所有功能的基础上.加入了相应的用来处理内部组件的方法add.insert.remove和removeAll. 在配置