ext.panel.panelを拡張するための適切な方法は?
質問
EXT JS 4.1.1を使用してWebページ用のGUIを作成しています。私はより複雑なレイアウトで使用できるコンポーネント( ' GenesearchComponent ')を作成しようとしました。しかし、何らかの理由で、 ' GenesearchComponent 'に hpanel に挿入することはできません。事前定義された ' ext.panel.panel 'クラスの拡張に何がありませんか(そして私自身の "ウィジェットの作成)?
"Ext.create('gene-search-component', ...
"の呼び出しを削除すると、すべてが機能します。私がそれを取り戻したら、すべてが壊れます。なぜだろうか。
(私は '遺伝子コンボボックスの定義を含めていません。私は私の問題の根本的な原因ではないと私はかなり確信しています。)
あなたの時間をありがとう!
Tuomas
Ext.define('GeneSearchComponent', {
extend: 'Ext.panel.Panel',
alias: ['gene-search-component'],
constructor: function(cnfg) {
this.callParent(arguments);
this.initConfig(cnfg);
},
config: {
collapsible: true,
frame: true,
title: 'Search',
bodyPadding: '15 15 15 15',
width: 350,
layout: {
type: 'vbox',
align: 'left'
},
items: [
Ext.widget('gene-combobox', {
id: 'comboboxid'
}),
Ext.create('Ext.Button', {
text: 'Search',
handler: function() {
dosomething();
}})]
},
onRender: function() {
this.callParent(arguments);
}
});
Ext.application({
name: 'FW',
launch: function() {
var bd = Ext.getBody();
var div = Ext.get("search_form");
var hpanel = Ext.create('Ext.panel.Panel', {
id: 'horizontal-panel',
title: "HBoxLayout Panel",
layout: {
type: 'hbox',
align: 'middle'
},
items: [
Ext.create('Ext.container.Container', {
id: 'another-panel',
title: "VBoxLayout Panel",
width: 250,
layout: {
type: 'vbox',
align: 'left'
},
items: [{
xtype: 'panel',
width: 250,
title: ' Panel One',
flex: 2
},{
xtype: 'panel',
width: 250,
title: ' Panel Two',
flex: 1
},{
xtype: 'panel',
width: 250,
title: ' Panel Three',
flex: 1
}]}),
Ext.create('gene-search-component', {
id: 'searchPanel',
})],
renderTo: div,
});
}
});
. 解決
問題は、そのエイリアスを設定するときにgene-search-component
のnamespaceを与えていないことです。
alias: 'widget.gene-search-component'
.
あなたのopのコメントをエコーして、あなたがそうである途中でコンポーネントを作成する必要のない入力をたくさんしています。ext.createをいたるところで使用するのではなく、XTypeフィールドを利用する必要があります。私はあなたのコードをあなたのコードを修正しました。
href="http://jsfiddle.net/hzxx8/" rel="nofollow"> http://jsfiddle.net/hzxx8/
所属していません StackOverflow