皮皮网

【知更鸟网站源码】【桃源码头苏州】【派享云源码】extjs源码

2024-12-24 20:45:27 来源:opencv字母识别源码

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

extjs源码

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的分页按钮和显示信息交换位置,本来是桃源码头苏州分页按钮在左边

       源码里面写死了。要是派享云源码需要的话,可以参照源码,高防cdn源码把后面显示的ecshop教程源码下载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);

            }

           }]

       });

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