4

私は新しいdataviewコンポーネントを試していますが、このSenchaの例を使用しています。

http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/

KittensListItemで画像を削除しました。次に、ストアの値ではなく、「Eメール」、「Facebook」、「Twitter」という3つのボタンを追加します。ユーザーが各ボタンをクリックすると、各ボタンのそれぞれのストア値が表示されます。これはどのように達成できますか？

現在の画面は次のようになります。

ここに画像の説明を入力してください

Example.view.KittensListItem：

Ext.define（'Example.view.KittensListItem'、{
    拡張：'Ext.dataview.component.DataItem'、
    xtype：'contactslistitem'、

    必要なもの：['Ext.Button'、'Ext.slider.Slider']、

    構成：{

        dataMap：{

            getName：{setHtml：'name'}、
            getSlider：{setValue：'かわいさ'}、
            getEmail：{setHtml：'email'}、
            getTwitter：{setHtml：'twitter'}、
            getFacebook：{setHtml：'facebook'}
        }、

        名前：{フレックス：1}、

        スライダー：{フレックス：1}、

        Eメール： {
            テキスト：'メール'、
            スタイル：'フォントサイズ：12px;'、
            フレックス：1
        }、
         フェイスブック： {
            テキスト：'Facebook1'、
            スタイル：'フォントサイズ：12px;'、
            フレックス：1
        }、
        ツイッター： {
            テキスト：'Twitter'、
            スタイル：'フォントサイズ：12px;'、
            フレックス：1
        }、

        レイアウト： {
            タイプ：'hbox'、
            整列：'中央'
        }
    }、

    applyName：function（config）{return Ext.factory（config、Ext.Component、this.getName（））; }、

    updateName：function（newName、oldName）{
        if（newName）{this.add（newName）; }

        if（oldName）{this.remove（oldName）; }
    }、


    applySlider：function（config）{return Ext.factory（config、Ext.slider.Slider、this.getSlider（））; }、

    updateSlider：function（newSlider、oldSlider）{
        if（newSlider）{this.add（newSlider）; }

        if（oldSlider）{this.remove（oldSlider）; }
    }、

    applyEmail：function（config）{return Ext.factory（config、Ext.Button、this.getEmail（））; }、

    updateEmail：function（newEmailButton、oldEmailButton）{
        if（newEmailButton）{this.add（newEmailButton）; }

        if（oldEmailButton）{this.remove（oldEmailButton）; }
    }、

    applyTwitter：function（config）{return Ext.factory（config、Ext.Button、this.getTwitter（））; }、

    updateTwitter：function（newTwitterButton、oldTwitterButton）{
        if（newTwitterButton）{this.add（newTwitterButton）; }

        if（oldTwitterButton）{this.remove（oldTwitterButton）; }
    }、

    applyFacebook：function（config）{return Ext.factory（config、Ext.Button、this.getFacebook（））; }、

    updateFacebook：function（newFacebookButton、oldFacebookButton）{
        if（newFacebookButton）{this.add（newFacebookButton）; }

        if（oldFacebookButton）{this.remove（oldFacebookButton）; }
    }
}）;

モデル：

Ext.define（'Example.model.Kitten'、{
    拡張：'Ext.data.Model'、

    構成：{
        田畑： [
            "名前"、
            "Eメール"、
            "ツイッター"、
            "フェイスブック"、
            {名前： "かわいさ"、タイプ：'int'}
        ]
    }
}）;

店：

Ext.define（'Example.store.Kittens'、{
    拡張：'Ext.data.Store'、
    必要なもの：['Example.model.Kitten']、

    構成：{
        モデル：'Example.model.Kitten'、

        データ： [
            {名前：'one'、メール：'email @ addr'、ツイッター：'@twitter'、フェイスブック：'フェイスブック...'、かわいらしさ：70}、
            {名前：'two'、メール：'email @ addr'、ツイッター：'@twitter'、フェイスブック：'フェイスブック...'、かわいらしさ：90}、
            {名前：'three'、メール：'email @ addr'、twitter：'@twitter'、facebook：'Facebook ...'、かわいさ：40}
        ]
    }
}）;
4

2 に答える 2

2

インターネットを精査した後、各ボタンの「タップ」イベントの解決策を見つけました。秘訣は、update*関数にタップリスナーを追加することです。各ボタンに静的ラベルを設定する方法がまだわかりません。

ところで、より良い答えは他の誰かに賛成票を投じてチェックさせます。

    updateEmail：function（newEmailButton、oldEmailButton）{
        if（newEmailButton）{
        newEmailButton.on（'tap'、this.onEmailButtonTap、this）;
            this.add（newEmailButton）;
        }

        if（oldEmailButton）{
            this.remove（oldEmailButton）;
        }
    }、

    onEmailButtonTap：function（button、event）{

    var record = this.getRecord（）;
        Ext.Msg.alert（record.get（'email'）+ "、" + record.get（'facebook'））;
  }
于 2012-04-26T14:30:43.943 に答える
1

こんにちは私はSenchaTouchを初めて使用し、始めても問題があります。コントローラーからデータビューアイテムのコンポーネント/値にアクセスする方法を探しているこの投稿に出くわしました。私の場合、スライダーとエディットボックスの値を一緒に使用し、更新後にいずれかの値を自動的に更新することを検討しています。

Dataviewには、この投稿で説明されているように、行インデックスとレコードを返すのに便利なitemtapリスナーがあります。タップされたコンポーネントを特定するのはまだ問題であることがわかったため、イベントオブジェクト名でコンポーネントをフィルタリングするだけでした。

コントローラ： 

  control: {

      'contactslistitem': {
          itemtouchend: 'tapItem',
       }
  }

  tapItem: function(dataview, index, target, record,  e, eOpts) {

       if('facebookbutton'==e.target.name)
           alert('Tapped facebook button on row '+index);
  }

Facebookボタン要素のdataview構成には、name属性が含まれています。

    facebook: {
        name: 'facebookbutton'
        text: 'Facebook1',
        style: 'font-size: 12px;',
        flex: 1
    },

毎回インデックス/コンポーネントを検索することなく、データビュー行コンポーネントを一緒に処理するためのST2のより良い方法が必要だと私はまだ感じています。

于 2012-05-17T09:19:15.263 に答える