8

標準の Sencha ExtJS 4 ウィジェット/コンポーネントを拡張していて、思い通りに動かないものがたくさんあることを発見したとします。あるいは、それらが壊れているだけで、Sencha が問題を修正できていないとします。コンポーネントはまだです。Sencha ExtJS Ext.tree.Panel と Ext.tree.Store を 2 つのサンプル コンポーネントとして使用します。現在使用しているコア ExtJS 4 フレームワーク JS ファイルを変更せずに、そのコンポーネントの問題を見つけて修正できるように、コンストラクター、構成、プロパティ、メソッド、およびイベントをオーバーライドするための最も基本的な手順は何ですか?

フレームワークには非常に多くの機能があり、どこかの構成を見落として、標準の実装で問題を解決できることに気付かないことがあります。これは、フレームワークの経験を積むことで修正できるものです。それはさておき、これらの最も基本的な手順は何でしょうか?

これら 2 つの実装から始めて、非常に基本的なものから始めるとします。

参考までに: Ext.Direct サーバー サイド スタックを実際に使用して、これら 2 つのコンポーネントのコア機能をあまり労力をかけずに動作させることができました。また、Sencha ExtJS Ext.tree.Panel コンポーネントと IE のクロス ブラウザー互換性の問題をすべて説明することができました。 Mozilla Firefox と Google Chrome ですが、おそらく他の質問をするのに多くの時間を費やしてしまうでしょう。また、IE がステレオタイプであると言っているわけではありません。なぜなら、これらのブラウザーはすべて、Ext.tree.Panel コンポーネントに問題があるからです。自分の魚を釣れるように、ここで釣り方を学びたいです。これらのツリー関連のクラスをよりよく理解したら、より具体的な質問をします。

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore

カスタム Ext.data.TreeStore 実装:

Ext.define('MyApp.store.TreeNodes', {
    extend: 'Ext.data.TreeStore',
    xtype: 'store-tree-nodes',
    model : 'MyApp.model.TreeNode',
    proxy: {
        type: 'direct',
        directFn: Tree_Node_CRUD.read,
        reader: {
            root: 'data'
        }
    },
    nodeParam: 'node',
    parentField: 'parentId',
    root: {
        text: 'root',
        id: '0',
        expanded: true
    },
    autoLoad: false,
    single: true,
    listeners: {
        beforeload: function(store, operation, options) {
        },
        append: function( thisNode, newChildNode, index, eOpts ) {
        }    
    }
});

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel

カスタム Ext.tree.Panel 実装:

Ext.define('MyApp.view.MainTree', {
    extend: 'Ext.tree.TreePanel',
    xtype: 'view-main-tree',
    requires: [
        'MyApp.store.TreeNodes'
    ],
    initComponent: function() 
    {        
        this.store = 'TreeNodes';
        this.superclass.initComponent.call(this);
    },
    animate: false,
    title: 'Tree',
    rootVisible: true,
    collapsible: true,   
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: 'Open Node'
        }, {
            text: 'Create Node'
        }, {
            text: 'Delete Node'
        }, {
            text: 'Expand All'
        }, {
            text: 'Collapse All'
        }]
    }], 
    listeners: {
        afterrender: function() {
        },
        itemclick: function(view, node, item, index, e) {
        },
        afteritemexpand: function() {  //node, index, item, eOpts) {
        },
        afteritemcollapse: function() { //node, index, item, eOpts) {
        }
    }
});
4

2 に答える 2

0

正しく機能していないと思われる機能、または機能したい方法をオーバーライドします

例

Ext.define('MyApp.store.TreeGridStore', {
extend: 'Ext.data.TreeStore',
getTotalCount : function() {
    if(!this.proxy.reader.rawData) return 0;
    this.totalCount = this.proxy.reader.rawData.recordCount;
    return this.totalCount;
},  
....

上記の例では、getTotalCount 関数でカウントを別の方法で計算する必要があるため、ツリーストアを拡張してメソッドをオーバーライドしました。

于 2013-08-15T17:35:14.460 に答える