如何在煎茶触摸中滑动多屏

Posted 2023-03-03

【中文标题】如何在煎茶触摸中滑动多屏

【英文标题】：How to have the slide multiple screens in Sench touch

【发布时间】：2012-02-14 07:19:10

【问题描述】：

我正在开发一个应用程序，当单击表单中的提交按钮时，它应该转到另一个屏幕。然而，它只是在窗口外打印结果，并没有真正进入新屏幕。我已经对商店进行了硬编码，以确保在我启动应用程序时有数据并且它仍然在可视区域之外打印它。

这是我的 Ext.data.Store：

var store = new Ext.data.Store(
  model: 'jobSummary',
  storeId: 'jobStore',
  data : [title: 'This is test',
    title: 'This is test2',
    title: 'This is test3']
);

这是我使用它的列表：

SearchJobsForm.jobsList = Ext.extend(Ext.Panel, 
  dockedItems : [ 
    xtype : 'toolbar',
    title : 'WTJ',
    dock : 'top',
    items : [ 
      xtype : 'button',
      text : 'Back',
      ui : 'back',
      handler : function() 
        //back button controller
      ,
      scope : this
     ]
   ],
  items : [ 
    xtype : 'list',
    emptyText : 'No data available.',
    store : 'jobStore',
    itemTpl : '<div class="list-item-title">title</div>' 
    +
      '<div class="list-item-narrative">narrative</div>',
    onItemDisclosure : function(record) 
    ,
    grouped : false,
    scroll : 'vertical',
    fullscreen : true
   ],
  initComponent : function() 
    SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
  
);

我正在从我的提交按钮处理程序中调用此列表面板：

var jobsList = new SearchJobsForm.jobsList();

我在此链接上粘贴的完整代码以提高可见性： http://pastebin.com/a05AcVWZ

【参考方案1】：

好的，

SearchJobsForm.form 是您的主面板，它将包含两个组件：searchForm（带有文本/选择输入）和面板/结果列表。 在回调中，我们将隐藏（）表单并显示（）结果列表。这不是一个干净的代码，而是我能从你的代码中得到的最简单和最亲近的代码。

首先让我们实例化jobsList

// 它有 id (id: 'jobsListId')

var jobsList = new SearchJobsForm.jobsList();

那么您应该将所有输入放入一个表单（xtype : formpanel, id: 'searchFormId') 并在表单后面添加 resultPanel

这里是代码

SearchJobsForm.form = Ext.extend(Ext.Panel,

    initComponent: function()

        Ext.apply(this, 
            id: 'searchForm',
            floating: true,
            width: 250,
            height: 370,
            scroll: 'vertical',
            centered: true,
            modal: true,
            hideOnMaskTap: false,
            items: [
            
                xtype: 'formpanel', // 1. this is the added formpanel
                itemId: 'searchForm',
                id:  'searchFormId', // this id is important
                items: [
                  
                    xtype: 'textfield',
                    ...
                , 
                    xtype: 'textfield',
                    ...

                ,
                // all your inputs 
                ]
            ,
                // 2. add here the results panel : jobsList
                jobsList
            ],  // the code continues inchanged
                dockedItems: [
                              ...

- 最后我们将修改 ajax 回调以隐藏/显示面板。不要删除其中一个，否则您将无法重置表单

//它来了

        Ext.util.JSONP.request(
            url: "http://"+serverAdd+":"+ port+"/users/searchresults.json", 
            format: 'json',
            callbackKey: 'callback',
            params : searchCriteria,                
            callback: function(data) 
                console.log('callback');
                // Call your list-filling fonctions here
                // jobsList.fill(data);
                Ext.getCmp('searchFormId').hide();
                Ext.getCmp('jobsListId').show();

            ,
            failure: function ( result)  
                console.error('Failed'); 
            
        ); 

对于您的下一个项目，我建议您使用类和命名空间以避免 1000 个内衬文件； Ext.ns() 是你最好的朋友，可以避免你很多麻烦。

【讨论】：

你好沃姆。感谢您的建议。我明天会处理这个。我背后的想法是让它工作，然后将它分成几类以便更好地理解。我不想从那开始，因为我不懂语言。因为我发布了这个问题，所以我没有去任何地方，所以我开始了一个新项目，完全修改了上面提到的整个代码，以获得更好的清晰度。我不知道还能做什么。明天我会试一试然后回来。再次感谢您的帮助。

嘿 Vaugham，我采纳了您的建议并将所有代码转换为 MVC，并采用了更加结构化的方法。一切正常，除了重置按钮。 :( 你能帮我看看吗。***.com/questions/8993284/…