2013-01-25 109 views
0

我開發在煎茶觸摸一個應用程序,我是新來這個技術 第一次看到我的代碼如何將數據從一個頁面移動到另一個頁面中Senchatouch

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

控制器 - > dealscontroller.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/[email protected]', 
      '144': 'resources/icons/[email protected]' 
     }, 

     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)我的問題是,當我點擊一個listitem數據沒有移動到下一頁(DealsDescription.js)時。我的要求是數據移動到下一頁,並附加到xtype:label(DealsDescription.js屏幕)

回答

0

大多數人建立了一個頁面應用程序。所以你在刷新頁面的時候切換cards(或者標籤或者...)。通過這種方式,您可以始終通過JavaScript獲取數據。向上或向下瀏覽組件樹。

Up

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

Down

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

如果你想加載你需要一個全新的應用了新的一頁。所以,你可以使用會話或本地存儲傳輸數據在頁面之間。 (在商店/型號上使用sessionstorageProxy或localstorageProxy)。

0

基本上你必須在視圖的配置中聲明一個數據持有者變量,並且在創建這個視圖時,你可以用你想要的任何數據初始化它。

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); 
相關問題