【煎茶タッチ2.4.0】
ラベルとテキストフィールドの参照に対して呼び出された .setHtml および .setValue 関数が何もしないという問題があります。つまり、UI で変更が希望どおりに表示されませんが、コード行が実行された後に .getHtml または .getValue を実行するとブラウザのコンソール 変更はコンソールの出力に表示されますが、UI では何も変更されません。
このテスト アプリケーションでの私のシナリオは、3 つのラベル [lbl1、lbl2、lbl3] と 3 つのテキスト フィールド [txt1、txt2、txt3] があり、コントローラーの参照を介して lbl1、lbl3、txt1、txt3 にアクセスします。ユーザーが同じパネルのボタンをクリックすると、lbl1 と txt1 の内容を変更したいと考えています。ボタンのみの別のフォーム[初期ビュー]があります。上記で説明したように、3 つのラベル、3 つのテキストフィールド、およびボタンを含むパネルを開きますが、このパネルを押す前に lbl3 と txt3 を設定します。すべてのケースで、.setValue と .setHtml は UI を更新していません。ここで私が間違っていることを誰かが助けてくれますか? また、sencha Architecture プロジェクトを zip で添付しました。
MainViewr (初期ビュー)
Ext.define('MyApp.view.mainView', {
extend: 'Ext.navigation.View',
requires: [
'Ext.form.Panel',
'Ext.Button'
],
config: {
itemId: 'mynavigationview',
items: [
{
xtype: 'formpanel',
items: [
{
xtype: 'button',
itemId: 'mybutton1',
text: 'MyButton1'
}
]
}
]
}
});
2 番目のパネル
Ext.define('MyApp.view.MyFormPanel1', {
extend: 'Ext.form.Panel',
alias: 'widget.myformpanel1',
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.field.Text',
'Ext.Label'
],
config: {
itemId: 'myformpanel1',
scrollable: true,
items: [
{
xtype: 'panel',
docked: 'top',
height: '100%',
scrollable: true,
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
},
{
xtype: 'textfield',
itemId: 'txt3',
label: 'Field'
},
{
xtype: 'textfield',
id: 'txt2',
itemId: 'txt2',
label: 'Field',
name: 'txt2'
},
{
xtype: 'textfield',
itemId: 'txt1',
label: 'Field'
},
{
xtype: 'label',
html: 'Name 3',
itemId: 'lbl3'
},
{
xtype: 'label',
html: 'Name 2',
id: 'lbl2',
itemId: 'lbl2'
},
{
xtype: 'label',
html: 'Name1',
itemId: 'lbl1'
}
]
}
]
}
});
1 番目のビューのコントローラー。ここで、ラベルとテキストフィールドの内容（参照を介して2番目のビューにあるlbl3とtxt3）を変更したいのですが、setValueとsetHtml、またはhide（）やsetHidden（true）などの参照に対して他の関数を呼び出しても表示されませんUI上ではありますが、ブラウザーのコンソールでgetValue()、getHtml、getHiddenを実行すると、隠しプロパティとコンテンツが変更されますが、UIには反映されません。
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mainView: 'navigationview#mynavigationview',
lbl3: 'label#lbl3',
txt3: 'textfield#txt3',
myFormPanel1: 'formpanel#myformpanel1'
},
control: {
"button#mybutton1": {
tap: 'btnlogin_click'
}
}
},
btnlogin_click: function(button, e, eOpts) {
var myformpanel1 = Ext.create('widget.myformpanel1');
lbl3 = this.getLbl3();
txt3=this.getTxt3();
mainView = this.getMainView();
txt3.setValue('Hello');
lbl3.setHtml('Hello');
mainView.push({
xtype: "myformpanel1",
title: "Dashboard"
});
}
});
セカンドビューのコントローラー。ご覧のとおり、ボタン クリックで lbl1、lbl2、txt1、および txt2 の内容を変更しようとしましたが、lbl2 と txt2 の内容のみが変更されています。これは、参照ではなく ID を介してアクセスしたためです。
Ext.define('MyApp.controller.MyController1', {
extend: 'Ext.app.Controller',
config: {
refs: {
lbl1: 'label#lbl1',
txt1: 'textfield#txt1'
},
control: {
"button#mybutton": {
tap: 'setText_Click'
}
}
},
setText_Click: function(button, e, eOpts) {
lbl1 = this.getLbl1();
txt1 = this.getTxt1();
Ext.getCmp('txt2').setValue("Hello");
Ext.getCmp('lbl2').setHtml("Hello");
txt1.setValue("Hello");
lbl1.setHtml("Hello");
}
});
ID を介してコントロールにアクセスすることが唯一の方法ですか? ID を介してコントロールにアクセスすることは、Sencha Touch ではあまり良いことではないということをどこかで読んだことがあります。コードがコントロールのコンテンツとプロパティを内部的に変更するが、UI には反映されないようにするために、ここで何が間違っているのでしょうか。