Extjs3 Ext.extend Using Pit Filling

Posted on Edited on In Waline:

Ext.extend

When using Extjs, we often use its custom component function to create the components we need, but there is a point to note when using Ext.extend, that is, if your custom component has some fixed items, then These items cannot be directly thrown into the configuration item, but need to be declared in the initComponent function.

Below is a common template

1
2
3
4
5
6
7
8
9
10
11
MyComponent = Ext.extend(Ext.Panel, {
    initComponent: function(){
        Ext.apply(this, {
            _name: 'MyComponent'//Not required, use console.log to display object names when debugging.
        });
        this.items = [{
            //If there are fixed items, they must be set here
        }];
        MyComponent.superclass.initComponent.call(this);
    }
});

In fact, not only items, if you want to add new event listeners for subcomponents, you also need to declare them in initComponents

Ext.Ajax.request

When using Ext. Ajax to send POST requests, you may encounter cross-domain problems, even if the background is set to allow cross-domain, such as the following method

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', 'Saved successfully');
              },
              failure: function(response, opts) {
                  console.log('server-side failure with status code ' + response.status);
              }
           });

However, if you modify the data transmission method to params, there will be no cross-domain problem, such as

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', 'Saved successfully');
              },
              failure: function(response, opts) {
                  console.log('server-side failure with status code ' + response.status);
              }
           });

TreeLoader

When we use AsyncTreeNode and TreeLoader, even if the data is fully loaded by the TreeLoader, it will not be rendered to the root node.

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)
  })

Below is the request when I refresh the page, you can see that the data has been fully loaded

However, in the node printed by the load event monitored during tree initialization, only the first layer node can be rendered