Extjs 如何在Senchatouch中将数据从一页移动到另一页

我正在sencha touch中开发一个应用程序，我是这项技术的新手 首先看看我的代码

查看-->Main.js

查看-->ListPage.js

模型-->详细模型.js

控制器-->dealscontroller.js

app.js

//
Ext.Loader.setPath({
“Ext”：“touch/src”，
“交易列表”：“应用程序”
});
//
外部应用程序({
控制器：[“dealscontroller”]，
名称：“交易列表”，
要求：[
“Ext.MessageBox”
],
视图：['Main'，'ListPage'，'DealsDescription']，
门店：['DetailStore']，
模型：['DetailModel']，
图标：{
“57”：“resources/icons/Icon.png”，
'72'：'resources/icons/Icon~ipad.png'，
“114”：“资源/图标”/Icon@2x.png',
“144”：“资源/图标/图标”~ipad@2x.png'
},
isIconPrecomposed：正确，
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'
},
启动：函数（）
{
//销毁#appLoadingIndicator元素
Ext.fly（'appLoadingIndicator'）.destroy（）；
变量主页={
xtype:'mainlist'
};
变量列表页={
xtype:'listPage'
};
var dealsdescription={
xtype:'dealsdescription'
};
//初始化主视图
add（[mainPage，listpage，dealsdescription]）；
},
未更新：函数（）{
Ext.Msg.confirm(
“应用程序更新”，
“此应用程序刚刚成功更新为最新版本。是否立即重新加载？”，
功能（按钮）{
如果（buttonId==“是”）{
window.location.reload（）；
}
}
);
}
});

---

在我的应用程序的第一个屏幕上，我有一个go按钮。当我点击这个按钮时，它会显示一个列表（listpage.js）。我的问题是，当我点击一个列表项时，数据没有移动到下一页（DealsDescription.js）。我的要求是数据移动到下一页并附加到

xtype:label

（DealsDescription.js屏幕）

我们大多数人都设置了一个单页应用程序。因此，在刷新页面的过程中切换（或选项卡等…）。通过这种方式，您可以始终通过javascript访问数据。在组件树上或下导航

:

:

---

如果你想加载一个新页面，你需要一个全新的应用程序。。因此，您可以使用会话或本地存储在页面之间传输数据。（在您的存储/模型上使用SessionStorage Proxy或localstorageProxy）。

基本上，您必须在视图的配置中声明一个数据持有者变量，并且在创建此视图时，您可以使用您想要的任何数据对其进行初始化

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

然后在initialize中，您可以访问此

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);

var项目=[{
xtype:“工具栏”，
停靠：'顶部'，
标题：'SampleDeals'，
项目：[
{
xtype:“按钮”，
id:'backbutton'，
用户界面：'返回'，
文本：'返回'
}
]
},
{
xtype:“标签”，
html:“”+数据。子类别名称+“”
}];
这是一个集合项目（items）；

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:''
            }
        }
    }

});

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"}
        ]
    }
});

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);

    }

    });

    //<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();
                    }
                }
            );
        }
    });

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

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

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);