4

別のコンポーネントのテンプレートによってレンダリングされる要素に別のコンポーネントを挿入しようとしています..しかし、afterrender イベントでは、テンプレートはまだレンダリングされていないため、Ext.get(el-id) の呼び出しは null: を返しますTypeError el is null。

   tpl: 
    new Ext.XTemplate(
      '<tpl for=".">',
        '<ul>',
          '<li class="lang" id="cultureSelector-li"></li>',
        '</ul>',

      '</tpl>'
      ),

  listeners: {
    afterrender: {
      fn: function (cmp) {
        console.log(Ext.get('cultureSelector-li')); // < null :[
        Ext.create('CultureSelector', { 
          renderTo: 'cultureSelector-li' 
        });
      }
    }
  },

では、このコンポーネントをいつ追加して、要素がターゲティングされるように DOM で作成できるのでしょうか?

4

3 に答える 3

0

私は自分で仕事をしなければならなくなりました。そのため、テンプレートを というプロパティとして取得theTplし、 でレンダリングすると、beforerenderで要素のハンドルを取得できましたafterrender。これは完全に直感に反するように思えますが、誰か洞察を持っていますか?

beforeRender: {
      fn: function (me) {
        me.update(me.theTpl.apply({}));
      }
    },

実際に編集して、コンポーネントを次のように拡張しました。

Ext.define('Ext.ux.TemplatedComponent', {
  extend: 'Ext.Component',
  alias: 'widget.templatedComponent',
  template: undefined,
  beforeRender: function () {
    var me = this;
    var template = new Ext.XTemplate(me.template || '');
    me.update(template.apply(me.data || {}));
    me.callParent();
  }
})

... templatehtml フラグメントの配列を受け入れます

于 2012-10-25T14:17:32.377 に答える
0

使用しているコンポーネントに依存すると思います。たとえば、データ グリッド ビューにはニーズに合った「viewready」イベントがあり、何をしようとしているのかによって、「boxready」関数はコンボ ボックスに対して機能する可能性があります (ただし、最初のレンダリングのみ)。それ以外に、要素の親クラスを調べて、呼び出されている XTemplate レンダリング関数 (レイアウト マネージャーにある可能性があります) を検索し、それを拡張してそこでイベントを発生させるか、競合状態のリスクを冒して、 setTimeout() 呼び出しに妥当な遅延が発生します。

于 2012-10-25T14:04:30.943 に答える
0

私は間違ったものを使用していたことが判明しました-明らかに、このタイプのものには render* 構成を使用する必要があります (では、tpl&構成は何のdataためにあるのでしょうか?)

以下は、sencha フォーラムから提供された実用的なフィドルです。

http://jsfiddle.net/qUudA/10/

于 2012-10-26T10:24:50.980 に答える