皮皮网

1.easyui和extjs哪个好
2.请教一下extjs中如何把Ext.PagingToolbar的分页按钮和显示信息交换位置，本来是签名头像源码分页按钮在左边
3.Extjs 之 initComponent 和 constructor的区别
4.EXTjs中如何获取Panel中html的内容

easyui和extjs哪个好

       ä½œä¸ºExtJs和EasyUI都用得很熟练的一个老资格程序员，我发表一下我的看法。

       é¦–先两个框架的组件都很丰富，商业应用都要收费。ExtJS的动态性和扩展性更好，从使用效果看，easyui的组件相对体验更好一点。

       ExtJS

       ä¼˜ç‚¹ï¼š1.完全开源，我说的开源的意思并不是说不收费。

       2.我非常赞赏它的架构设计，完全的面向对象的组件化设计。所有的组件都是从一些基础的组件派生出来的，并且提供了overide,extend等扩展方式，可以说能够任意扩展。可能一些半桶水的人觉得ExtJS很难用，那是因为他们只懂皮毛。

       3.ExtJS的文档和实例做得比EasyUI要好得多，基础比较好的开发人员只用看官方的文档、demo、适当参考源码就能够完成任何工作，遇到问题完全不用去百度或论坛问其他人。

       4.可以完全动态开发,代码都写在JS文件里，不像ExtJS那样非得在页面放一个DOM元素。所以可以自己定制组件在任意页面引用，复用性好。

       ç¼ºç‚¹ï¼š1.可能太多人用，造成审美疲劳，反正我看腻了它的界面，自己定制界面主题有太难。

       2.可能因为它太庞大，不像easyUI那样基于页面已有的HTML

       DOM渲染，所以一般人觉得比较难(但是话有说会来，如果使用者的水平高的话，这其实也是也是它的优点。因为你要是在同一个界面点击不同按钮要动态显示各种各样不同的window、form等等的话，只要把这些JS引用到当前页面就可以吧，见上述优点4）。

       easyui

       ä¼˜ç‚¹ï¼š

       1.在页面的DOM元素加一些属性然后加几行JS就可以动态构造出相应的组件。开发方式相对ExtJS直观和简洁一些。

       2.组件相对体验更好一点，界面好像跟干净简洁。

       ç¼ºç‚¹ï¼š1.半开源，对于一个高手来说看不到源代码是很痛苦的，事，因为他们总有这样那样的扩展需求。

       2.一定要在页面上放置相应的DOM元素才能渲染（如果不对dom元素设置隐藏的话，在页面没有渲染过程中会显示一堆乱七八糟的东西）所以无法自己定制组件在其他页面引用，要复用的话得搬砖一样把JS和DOM都复制过来，遇到非常复杂的页面那是相当杂乱和痛苦的。

请教一下extjs中如何把Ext.PagingToolbar的分页按钮和显示信息交换位置，本来是nginx http源码分页按钮在左边

       源码里面写死了。要是csapp lab源码需要的话，可以参照源码，nio源码解析把后面显示的通达讯源码displayMsg写到前面就好了。

       附源码：

initComponent : function(){

               var pagingItems = [this.first = new T.Button({

                   tooltip: this.firstText,

                   overflowText: this.firstText,

                   iconCls: 'x-tbar-page-first',

                   disabled: true,

                   handler: this.moveFirst,

                   scope: this

               }), this.prev = new T.Button({

                   tooltip: this.prevText,

                   overflowText: this.prevText,

                   iconCls: 'x-tbar-page-prev',

                   disabled: true,

                   handler: this.movePrevious,

                   scope: this

               }), '-', this.beforePageText,

               this.inputItem = new Ext.form.NumberField({

                   cls: 'x-tbar-page-number',

                   allowDecimals: false,

                   allowNegative: false,

                   enableKeyEvents: true,

                   selectOnFocus: true,

                   submitValue: false,

                   listeners: {

                       scope: this,

                       keydown: this.onPagingKeyDown,

                       blur: this.onPagingBlur

                   }

               }), this.afterTextItem = new T.TextItem({

                   text: String.format(this.afterPageText, 1)

               }), '-', this.next = new T.Button({

                   tooltip: this.nextText,

                   overflowText: this.nextText,

                   iconCls: 'x-tbar-page-next',

                   disabled: true,

                   handler: this.moveNext,

                   scope: this

               }), this.last = new T.Button({

                   tooltip: this.lastText,

                   overflowText: this.lastText,

                   iconCls: 'x-tbar-page-last',

                   disabled: true,

                   handler: this.moveLast,

                   scope: this

               }), '-', this.refresh = new T.Button({

                   tooltip: this.refreshText,

                   overflowText: this.refreshText,

                   iconCls: 'x-tbar-loading',

                   handler: this.doRefresh,

                   scope: this

               })];

               var userItems = this.items || this.buttons || [];

               if (this.prependButtons) {

                   this.items = userItems.concat(pagingItems);

               }else{

                   this.items = pagingItems.concat(userItems);

               }

               delete this.buttons;

               if(this.displayInfo){

                   this.items.push('->');

                   this.items.push(this.displayItem = new T.TextItem({ }));

               }

               Ext.PagingToolbar.superclass.initComponent.call(this);

Extjs 之 initComponent 和 constructor的区别

       Extjs 提供的组件还是挺丰富的， 但是有时候需求更丰富。

       å½“Extjs 原生的组件无法实现我们的要求的时候， 就需要扩展Extjs 的组件实现自制组件了。

       é™¤äº†è¿™ç§ä½¿ç”¨çŠ¶å†µï¼Œ 有时候对于一些相同却有使用很多的配置， 可能像把它独立出来，单独设为一种组件供大家调用， 节省开发时间和提高代码重用度。

       initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

       1. initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的，只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法

       çœ‹ä¸€ä¸‹ Ext.AbstractComponent的源码文件 src/AbstractComponent.js

       åœ¨ constructor方法中调用了initComponent

       2.

        1）自定义类中的 initComponent　函数中必须调用 callParent();否则 调用者无法初始化这个对象

        2）针对button 这样的扩展组件来说，自定义类中的 constructor ，需要调用callParent( arguments);否则 调用者无法初始化这个对象

       [html] view plaincopyprint?

       this.callParent(arguments);

       this.callParent(arguments);

       è¿™é‡Œçš„arguments 是需要的。

       (在Extjs 4 之前的版本中， 可能会看到比较多的XXX.superclass.constructor.call 写法)

       sencha 的官网中有一篇针对这两个区别的讨论：

       /forum/showthread.php?-constructor-Vs-initComponent

       ä¸è¿‡è¯­æ³•æ˜¯åŸºäºŽExtjs 3 来讨论的， 笔者觉得作用不是很大。

EXTjs中如何获取Panel中html的内容

        // private

           afterRender : function(){

               if(this.floating && !this.hidden && !this.initHidden){

                   this.el.show();

               }

               if(this.title){

                   this.setTitle(this.title);

               }

               this.setAutoScroll();

               if(this.html){

                   this.body.update(Ext.isObject(this.html) ?

                                    Ext.DomHelper.markup(this.html) :

                                    this.html);

                   delete this.html;//看这里

               }

        è¿™ä¸ªæ˜¯Panel定义的源码，可以看到Panel在渲染后，把html属性被body.update使用了，然后该属性就被删除了。因此你定义出来的panel对象无法通过点属性来获取html你定义的内容了。

       æ‰€ä»¥æˆ‘们只能通过body来获取了。这样就行了：

var tb = new Ext.Panel({    

             html:'',

             tbar:[{

            text:"点击获取",

            handler : function() {

             alert(tb.body.dom.innerHTML);

            }

           }]

       });

       ä½ è¯•è¯•å§~~~