使用ExtJs开发项目总结

最新推荐文章于 2024-11-13 17:27:29 发布

hzylyl2402

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量104

点赞数

分类专栏： ExtJs 文章标签： javascript ui ViewUI

ExtJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、少用IFrame，或者不要使用Iframe。

2、每个页面Panel定义一个自定义的类，在OnReady直接写上即可。

3、没有必要就不要修改ExtJs原功能和CSS样式。

4、视图层(UI)、数据层(Data)、控制层(Action)分为3个JS来保存。

5、没有必要，千千万万不要定义全局变量，尽量使用局部变量。

6、充分利用Javascript的动态语言的动态这个特性。

7、少使用Cookie来保存一些变量。

8、要使用面向对象的思想去编写Javascript。

9、如果对原来控件功能修改，一定要想方法在一个地方达到目的，而不是大面积的修改。

10、在一个页面上同时存在多个请求时，不要使用AutoAbort这个属性。

11、在使用向后台提交数据时，注意前台的超时设置，及如果请求过长时，应该使用Loading来保证操作的独立性。

12、这条是希望可能达到的功能。就是可以学习游戏中的自动帮用户完成一些操作，或者可以使用教程的方式，在页面上动态的带动用户去完成一些未知道的功能。使用工具提示的方式去完成这个功能。

13、页面功能要尽量的简单，容易操作，功能独立性，我觉得没有必要在一个页面完成太多的功能。一个页面只有一个功能即可。

14、对于页面自适应，尽量使用CSS实现，不要使用JS来计算实现。

15、不要重叠太多面板，这样会导致DIV很多，浪费内存。

16、数据加载最好放在Panel的afterrender事件里完成。

17、少使用MessageBox来做为告警提示，最好使用在页面上直接提示。

18、不要把CSS直接写到JS当中。

19、如果使用BasicForm的Submit方法提交数据，且Form控件上存在Combox控件，则Combox必须设置hiddenName，否则提交的数据是Combox显示的文本，则不是值，hiddenName不要与Combox的id相同。例如：

{
        xtype : 'combo',
        fieldLabel : $lticketsc(name),
        id : name+'combo' ,
        hiddenName : name ,
        typeAhead : true,
        triggerAction : 'all',
        lazyRender : true,
        editable : false,
        value : '1',
        mode : 'local',
        store : new Ext.data.ArrayStore({
                    id : 0,
                    fields : [name , 'display'],
                    data : data //[[1, $d('topbook')], [2, $d('bottombook')]]
                }),
        valueField : name ,
        displayField : 'display'
    }

20、如果想在指定父容器中直接使用类.属性来获取属性的话，则可以通过控件中的这个属性来实现，ref : String

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。...

一个路径描述，与组件的 ownerCt 相关，它描述了把当前组件的命名引用放置到哪个父容器中去。

祖先的坐标路径可以通过'/'字符进行分隔。例如，将一个Toolbar Button的引用放入 拥有此Toolbar的Panel中 :

								
var
 myGrid = new
 Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel'
,
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save'
,
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'

    }],
    listeners: {
        afteredit: function
() {
            // 直接使用实例.属性来获取子控件saveButton，saveButton这个需要保证唯一


            myGrid.saveButton.enable();
        }
    }
});

在上面的代码中，如果 ref 是 'saveButton' ，那么引用将会被放置到Toolbar中。 ref 中的每个'/' 都会从组件的 ownerCt 向上移动一级。