extjs - Senchatouch であるページから別のページにデータを移動する方法

Question

私は sencha touch で 1 つのアプリケーションを開発しています。この技術は初めてなので、まず自分のコードを見てください。

表示 -->Main.js

Ext.define('DealsList.view.Main', {
    extend: 'Ext.Container',
    xtype: 'mainlist',
    requires: [
        'Ext.TitleBar',
        'Ext.Toolbar'

    ],
    config: {
        fullscreen:true,
        scrollable:false,
        layout: {
            // type:'fit'
        },

        items: [
            {
                xtype: 'toolbar',
                //ui   : 'green',
                docked: 'top',
                title: 'SampleDeals'
            },
            {
                xtype:'formpanel',
                fullscreen:false,
                scrollable:false,
                centered:true,
                style: 'background-color: gray',
                width:'90%',
                height:'70%',
                items:[
            {
                xtype:'selectfield',
                name:'Grade',
                label:'Grade',
                options:[
                    {
                        text:'All',
                        value:'Agrade'
                    },
                    {
                        text:'Drink',
                        value:'Bgrade'
                    },
                    {
                        text:'Entertainment',
                        value:'cgrade'
                    },
                    {
                        text:'Food',
                        value:'Dgrade'
                    }
                ]
            },
            {
                xtype:'searchfield',
                id:'usernametext',
                name:'ZipCode',
                placeHolder:'ZipCode',
                top:'25%'
            },
                    {
                        xtype:'button',
                        text:'Gps On/Off',
                        id:'btnList',
                        ui:'action',

                        height:33,
                        top:'40%',
                        left:'5%',
                        right:'5%'
                    },
                    {
                        xtype:'selectfield',
                        name:'Grade',
                        label:'Grade',
                        top:'55%',
                        options:[
                            {
                                text:'2 miles',
                                value:'Agrade'
                            },
                            {
                                text:'5 miles',
                                value:'Bgrade'
                            },
                            {
                                text:'10 miles',
                                value:'cgrade'
                            },
                            {
                                text:'15+ miles',
                                value:'Dgrade'
                            }
                        ]
                    },
                    {
                        xtype:'button',
                        text:'My Favorites',
                        id:'favbutton',
                        ui:'action',
                        width:150,
                        height:33,
                        top:'75%',
                        left:'5%'
                    }
                    ,{
                        xtype:'button',
                        text:'Go',
                        id:'gobutton',
                        ui:'action',
                        width:100,
                        height:33,
                        top:'75%',
                        right:'5%',
                        handler:this.regButton,
                        scope:this
                    }
                ]
            }

        ]
    }
});

ビュー -->ListPage.js

Ext.define('DealsList.view.ListPage', {
    extend: 'Ext.List',
    xtype: 'listPage',
    requires:['Ext.data.Store','Ext.dataview.List','Ext.data.proxy.JsonP'],
    config: {
       // itemTpl: '<table><tr><td><img src="{imageUrl}" width="70%" height="70%"/></td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td><div class=\"list-item-firstname\">{firstName}</div><div class=\"list-item-lastname\">{lastName}</div></td></tr></table>',
        itemTpl: ' <table><tr>' +
            '<td><img src="{logopath}"/></td>' +
            '<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>' +
            '<td><div><h3>{subcategoryname}</h3></div>' +
            '<div><h1>{specialinfo}</h1></div>' +
            '<div>Price:{originalprice}</div>' +
            '<div><h1>{fromdate}</h1></div>' +
            '</td></tr></table>',
        store: 'DetailStore',
        onItemDisclosure: true,
        items:
        [
            {
                xtype:'toolbar',
                title:'SampleDeals',
                docked:'top',
                items:[
                    {
                        xtype:'button',
                        id:'backbutton',
                        ui:'back',
                        text:'back'
                    }
                ]
            }

        ]

    }
});

ビュー -->DealsDescription.js

  Ext.define('DealsList.view.DealsDescription', {
    extend: 'Ext.Container',
    xtype: 'dealsdescription',
    requires:['Ext.Toolbar','Ext.field.Email','Ext.field.Password'],

    config: {
        fullscreen:true,
        scrollable:false,
        layout: {
            // type:'fit'
        },

        items: [
            {
                xtype:'toolbar',
                docked:'top',
                title:'SampleDeals',
                items:[
                    {
                        xtype:'button',
                        id:'backbutton',
                        ui:'back',
                        text:'back'

                    }
                ]
            },
            {
                xtype:'label',
                html: '<h1>{subcategoryname}</h1>'
                //html: ["test test"].join("") '',
            },
            {
                xtype:'label',
                html: '<h1>{dealtimestampfrom}</h1>'
                //html: ["test test"].join("") '',
            },
            {
                xtype:'label',
                html: '<h1>{specialinfo}</h1>'
                //html: ["test test"].join("") '',
            },
            {
                xtype:'label',
                html: '<h1>{originalprice}</h1>'
                //html: ["test test"].join("") '',
            },


            {
                xtype:'button',
                text:'Button',
                id:'xxxbutton',
                ui:'action',
                top:'30%',
                left:'35%',
                right:'35%',
                handler:this.saveButton
            }
        ]
    }
});

ストア-->DetailStore.js

Ext.define('DealsList.store.DetailStore', {
    extend: 'Ext.data.Store',

    config: {
        model: 'DealsList.model.DetailModel',
        autoLoad: true,
        remoteFilter: true,
        //sorters: 'leadid',
        grouper: {
            groupFn: function(record) {

               // return record.get('user_id')[0];
                return record.get('dealtimestampfrom')[0];
            }
        },
        proxy: {
            type: 'ajax',
            //url: 'http://113.193.181.53:8081/Test/chat/index.php/chat/onlineusers',
            url:'http://www.nomdeal.com/services/getbusinessoffers?catid=All&subcatid=All&lat=17.4418224&lng=78.4752594&dist=1000&userid=100&zipcode=&pagesize=1',
            //headers: {'Authorization': 'Basic GVU0IXZ6cFGzczE='},

            reader: {
                type: 'json',
                model: 'DealsList.model.DetailModel',
               // rootProperty: 'online-users'
                record:'businessholder',
               rootProperty: 'specialinfo'
              //  rootProperty:''
            }
        }
    }

});

モデル -->DetailModel.js

Ext.define('DealsList.model.DetailModel', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {name: "dealtimestampfrom",         type: "string"},
            {name: "dealtimestampto",         type: "string"},
            {name: "subcategoryname",         type: "string"},
            {name: "specialinfo",         type: "string"},
            {name: "originalprice",         type: "string"},
            {name: "logopath",         type: "string"},
            {name: "fromdate",         type: "string"}
        ]
    }
});

コントローラ - > dealcontroller.js

Ext.define('DealsList.controller.dealscontroller', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            BtnList:'#btnList',
            listPage:'listPage',
            mainpage:'mainlist',
            backHome:'#backbutton',
            goButton:'#gobutton',
            DealsDescriptionpage:'dealsdescription'


        },
        control: {
            goButton:
            {
                tap:'mainCategories'
            },
            backHome:
            {
                tap:'backToHome'
            },

            listPage:
            {
                itemtap: 'ListItemSelect'
            }
        }
    },
    // Transitions
    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },

    //called when the Application is launched, remove if not needed
    launch: function(app) {

    },

    mainCategories:function()
    {
        //alert('sf');
         Ext.Viewport.animateActiveItem(this.getListPage(), this.slideLeftTransition);
    },
    backToHome:function()
    {
         Ext.Viewport.animateActiveItem(this.getMainpage(), this.slideLeftTransition);
    },
    ListItemSelect : function (list, index, element, record)
    {
        Ext.Msg.alert('Alert',record.get('subcategoryname'));
        Ext.Viewport.animateActiveItem(this.getDealsDescriptionpage(), this.slideLeftTransition);

    }

    });

app.js

    //<debug>
    Ext.Loader.setPath({
        'Ext': 'touch/src',
        'DealsList': 'app'
    });
    //</debug>

    Ext.application({
        controllers: ["dealscontroller"],

        name: 'DealsList',

        requires: [
            'Ext.MessageBox'
        ],

        views: ['Main','ListPage','DealsDescription'],
        stores:['DetailStore'],
        models:['DetailModel'],

        icon: {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },

        isIconPrecomposed: true,

        startupImage: {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },

        launch: function()
        {
                   // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();

            var mainPage = {
                xtype:'mainlist'
            };

            var listpage = {
                xtype:'listPage'
            };
            var dealsdescription = {
                xtype:'dealsdescription'
            };

            // Initialize the main view
            Ext.Viewport.add(([mainPage,listpage,dealsdescription]));
        },

        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });

私のアプリの最初の画面には、移動ボタンがあります。このボタンをクリックすると、リスト(listpage.js)が表示されます。私の問題は、リストアイテムをクリックすると、次のページ(DealsDescription.js)に移動しないことです。私の要件は、データが次のページに移動し、それに追加されることですxtype:label(DealsDescription.js 画面)

score 0 · Accepted Answer

基本的に、ビューの構成でデータホルダー変数を宣言する必要があり、このビューを作成するときに、必要なデータで初期化できます。

var myView = Ext.create('DealsList.view.DealsDescription', {
  rec : someData //this would contain all data
});

rec次に、初期化で次のようにアクセスできます。

var data = this.config.rec;

次に、すべての内部コンポーネントを作成して、このビューのコンテナに追加できます。

var items = [{
  xtype:'toolbar',
  docked:'top',
  title:'SampleDeals',
  items:[
      {
      xtype:'button',
      id:'backbutton',
      ui:'back',
      text:'back'

      }
  ]
  },
  {
  xtype:'label',
  html: '<h1>'+data.subcategoryname+'</h1>'
  }];
  this.setItems(items);

score 0 · Accepted Answer

私たちのほとんどは、1 ページのアプリケーションをセットアップします。したがって、ページを更新する代わりに、カード(またはタブなど)を切り替えます。このようにして、JavaScript を介していつでもデータにアクセスできます。コンポーネントツリーを上下に移動します。

上：

mycomponent.up() //go up one level
mycomponent.up(selector) //go up till you reach the component meeting the criteria

下：

mycomponent.query(someComponentQuery) //go down and find all components meeting the criteria
mycomponent.getComponent(componentId) //get the (direct) child with given Id

新しいページをロードしたい場合は、まったく新しいアプリが必要です。そのため、セッションまたはローカルストレージを使用してページ間でデータを転送できます。(ストア/モデルで sessionstorageProxy または localstorageProxy を使用します)。

extjs - Senchatouch であるページから別のページにデータを移動する方法

2 に答える 2

Related

Reference