sencha touch 简单实现手机点菜菜单

来源：互联网发布：mac的搜狗输入法设置编辑：程序博客网时间：2024/05/29 04:58
Ext.define('app.controller.AddDishes', {Controller    extend: 'Ext.app.Controller',    config: {       // models: [''],        stores: ['AddDishes','AddDishesContent'],models: ['AddDishes','AddDishesContent'],views: ['order.AddDishes'],refs:{  mySelectedPanel:'button[action=mySelectedPanel]',  searchShow:'button[action=searchShow]',  addDishesTpl:'addDishesTpl',  container:'container',  addDishes:'addDishes',},    control: {   searchShow:{    tap:function(){    if(!this.actions){   this.actions=Ext.Viewport.add({     xtype:'actionsheet', top:'-1px', style:"height:30px;background-color:#fff;", modal:true, hideOnMaskTap:true, hideAnimation:{    type:'fadeOut',duration: 250, easing: 'ease-out'}, items:[{    xtype:'toolbar',docked:'top',style:'background-color:#fff;',defaults:{   layout:'hbox',},items:[{   xtype:'searchfield',},{   xtype:'button',   text:'完成',}] }]})}this.actions.show({type:'slide',direction: 'right'});}},//单击菜系名称addDishes:{                  initialize:function(){     var store2=Ext.getStore('addDishesContent');         var store=Ext.getStore('addDishes');         store.clearFilter();   store2.clearFilter();         var length=store.data.length;                    var str = new Array();     var strId= new Array();     store.filterBy(function(record){            str.push(record.get('title'))        strId.push(record.get('id'))                     });         for (i=0;i<strId.length;i++) {                             var button = Ext.create('Ext.Button', {                            text: str[i],        baseCls:'title_btn',        labelCls:'dishes_title',        cls:'dishes_title',        id:'cc'+strId[i],                            listeners:{           tap:function(t){            for(var j=0;j<strId.length;j++){             Ext.getCmp('cc'+strId[j]).setCls('dishes_title');         if('cc'+strId[j]==t.id){           Ext.getCmp(t.id).setCls('new_dishes_title');         }          }                var cc=store2.filter('titleId', t.id.replace(/[^0-9]/ig,""));                                  var list= Ext.create('Ext.List',{              store:cc,              itemTpl: new Ext.XTemplate(                               '<div class="dishes_content">',                                 '<div style="width:100%">{content}</div>',                                 '<tpl if="status==1">',                                   '<div ><span>原价: <span style="color:#6e6e6f;text-decoration:line-through">￥12.00份</span></span>  <span>剩余：<span style="color:#7e7e7e">2</span></span></div>',                                   '<div style="color:red;"><span style="background-color:red;color:#fff">特惠价</span>  <span style="color:red">￥8.00/份(限3份)</span></div>',                                '</tpl>',                                '<tpl if="status==0">',                                    '<div><span>价格: <span style="color:#7e7e7e">￥12.00份</span></span>  <span>剩余：<span style="color:#7e7e7e">2</span></span></div>',                                 '</tpl>',                                      '</div>')                })                                 list.setStore(store2);                                 Ext.getCmp('addDishesContent').add(list);                                        }        }             })        Ext.getCmp('addDishesTitle').add(button);                     }            },show:function(){    var store=Ext.getStore('addDishes');         store.clearFilter();         var length=store.data.length;                    var str = new Array();     var strId= new Array();     store.filterBy(function(record){            str.push(record.get('title'))        strId.push(record.get('id'))                     });var store2=Ext.getStore('addDishesContent');  store2.clearFilter();var cc=store2.filter('titleId', strId[0]);                    Ext.getCmp('cc'+strId[0]).setCls('new_dishes_title');                    var list= Ext.create('Ext.List',{     store:cc,     itemTpl: new Ext.XTemplate(                   '<div class="dishes_content">',                   '<div style="width:100%">{content}</div>',                   '<tpl if="status==1">',                      '<div ><span>原价: <span style="color:#6e6e6f;text-decoration:line-through">￥12.00份</span></span>  <span>剩余：<span style="color:#7e7e7e">2</span></span></div>',                      '<div style="color:red;"><span style="background-color:red;color:#fff">特惠价</span>  <span style="color:red">￥8.00/份(限3份)</span></div>',                  '</tpl>',                  '<tpl if="status==0">',                       '<div><span>价格: <span style="color:#7e7e7e">￥12.00份</span></span>  <span>剩余：<span style="color:#7e7e7e">2</span></span></div>',                 '</tpl>',                         '</div>')})                    list.setStore(store2);                    Ext.getCmp('addDishesContent').add(list);                    }}}}})View(视图)<pre name="code" class="javascript">Ext.define('app.view.AddDishes', {    alternateClassName: 'addDishes',    extend: 'Ext.Container',    xtype: 'addDishes',    requires: ['app.view.order.AddDishesTpl','app.view.order.AddDishesContentTpl'],    config: {            title: config.name+config.tableName,//cls:'bg',fullscreen: true,        layout: 'hbox',items:[    {          xtype: 'dataview' ,          id: 'addDishesTitle',  cls:'label_dishes_left',  flex:'1',  layout:'vbox',  items:[{     xtype:'button', docked:'top', baseCls:'search_btn', action:'searchShow', text:'搜索'  }]},{   xtype:'list',   id:'addDishesContent',   cls:'label_dishes_right',   flex:'3',   listeners:{       itemtap:function(){       console.log('cc');   }   }},{   hidden:true,   xtype:'button',   text:'确认加菜',   docked:'bottom',   baseCls:'dishes_look_btn',   id:'confirmBtn',   listeners:{      tap:function(){     util.showMessage('你还未添加菜品',true);  }   }},{   xtype:'button',   text:'查看已选',   docked:'bottom',   baseCls:'dishes_look_btn',   id:'seeBtn',   listeners:{       tap:function(){      Ext.getCmp('panel').show({type: 'slide', direction: 'down'});  Ext.getCmp('mySelectedBtn').show({type: 'slide', direction: 'down'});  Ext.getCmp('priceBtnDown').setHidden(true);  Ext.getCmp('priceBtnUp').setHidden(false);  Ext.getCmp('confirmBtn').setHidden(false);  Ext.getCmp('seeBtn').setHidden(true);   }   }},{     xtype:'button',   text:'总价：'+12+'元',   docked:'bottom',   labelCls:'my_selected_lbtn',   baseCls:'price_btn_down',   id:'priceBtnDown',   listeners:{      tap: function(){        Ext.getCmp('priceBtnDown').setHidden(true);  Ext.getCmp('priceBtnUp').setHidden(false);  Ext.getCmp('confirmBtn').setHidden(false);  Ext.getCmp('seeBtn').setHidden(true);  Ext.getCmp('panel').show({type: 'slide', direction: 'down'});  Ext.getCmp('mySelectedBtn').show({type: 'slide', direction: 'down'});  }   }},{   hidden:true,   xtype:'button',   text:'总价：'+12+'元',   docked:'bottom',   baseCls:'price_btn_up',   id:'priceBtnUp',   labelCls:'my_selected_lbtn',   listeners:{     tap: function(){       Ext.getCmp('priceBtnDown').setHidden(false); Ext.getCmp('priceBtnUp').setHidden(true); Ext.getCmp('confirmBtn').setHidden(true); Ext.getCmp('seeBtn').setHidden(false); Ext.getCmp('panel').setHidden(true); Ext.getCmp('mySelectedBtn').setHidden(true);  }   }},{   hidden:true,   xtype:'list',   docked:'bottom',   style:'width:100%;height:280px;background-color:rgba(255,255,255,0);border-top:1px solid #ccc',   id:'panel',  },{   hidden:true,   xtype:'button',   text:'我的已选('+23+')',   docked:'bottom',   id:'mySelectedBtn',   labelCls:'my_selected_lbtn',   baseCls:'my_selected_btn',   listeners:{       tap:function(){       Ext.getCmp('panel').setHidden(true);   Ext.getCmp('mySelectedBtn').setHidden(true);   Ext.getCmp('confirmBtn').setHidden(true);   Ext.getCmp('seeBtn').setHidden(false);   Ext.getCmp('priceBtnDown').setHidden(false);   Ext.getCmp('priceBtnUp').setHidden(true);   }   }   //id:'',}],    }});
0 0