Extjs3 Ext.extend 使用填坑

发表于 更新于 分类于 Waline：

Ext.extend

在使用Extjs时，我们经常会用到他的自定义组件功能来创建我们需要的组件，但是使用Ext.extend时有一个需要注意的点，那就是如果你的自定义组件有一些固定的items，那么这些items不能够直接丢到配置项中，而是需要在initComponent函数中声明。

下面是通用的模板

1
2
3
4
5
6
7
8
9
10
11
MyComponent = Ext.extend(Ext.Panel, {
    initComponent: function(){
        Ext.apply(this, {
            _name: 'MyComponent' // 非必须，调试时用 console.log 等可显示对象名。
        });
        this.items = [{
            // 如有固定的 items，须在此设定
        }];
        MyComponent.superclass.initComponent.call(this);
    }
});

其实不仅仅是是items，如果想要为子组件添加新的事件监听器也需要在initComponents中声明

Ext.Ajax.request

在使用 Ext.Ajax 发送POST请求时，可能会遇到跨域的问题，即使是后台设置了允许跨域，比如下面这种方式

1
2
3
4
5
6
7
8
9
10
11
Ext.Ajax.request({
              method: 'POST',
              url: 'http://localhost:3000/',
              jsonData: school,
              success: function(response, opts) {
                Ext.Msg.alert('Status', '保存成功');
              },
              failure: function(response, opts) {
                  console.log('server-side failure with status code ' + response.status);
              }
           });

但是如果修改数据传输方式为params就不会出现跨域问题，如

1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.Ajax.request({
              method: 'POST',
              url: 'http://localhost:3000/',
              params: {
                data: JSON.stringify(school)
              },
              success: function(response, opts) {
                Ext.Msg.alert('Status', '保存成功');
              },
              failure: function(response, opts) {
                  console.log('server-side failure with status code ' + response.status);
              }
           });

TreeLoader

当我们使用AsyncTreeNode以及TreeLoader时，即使数据TreeLoader将数据完全加载了进来也不会渲染到root节点中去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
let loader = null;
  let root = null;
  loader = new Ext.tree.TreeLoader({
    requestMethod: 'GET',
    dataUrl: 'http://localhost:3000/'
  });
  root = new Ext.tree.AsyncTreeNode({text: 'school'});
  
  var tree = new Ext.tree.TreePanel({
    id: 'school',
    collapsible: true,
    enableDD: true,
    height: 500,
    width: 1000,
    loader: loader,
    root: root,
    autoScroll: true,
    split: true,
    contextMenu: menu,
    listeners: {
      contextmenu: function( node, e ) {
        node.select();
        let c = node.getOwnerTree().contextMenu;
        c.contextNode = node;
        c.showAt(e.getXY());
      },
      nodedrop: function ( e ) {
        Ext.Msg.alert('Status', `drag ${e.dropNode.text} to ${e.target.text} with ${e.point}`);
      },
      click: function ( node, e ) {
        currentNode = node
      }
    }
  });
  // tree.expandAll();
  loader.on('load', function (vm, node, response) {
    console.log(node)
  })

下面是我页面刷新时的请求，可以看到数据已经被完全加载进来了

但是在tree初始化的时候监听的load事件打印出的节点中却只render可第一层节点