Как сделать так, чтобы на Sench touch было несколько слайдов - PullRequest
Новая
       29

Как сделать так, чтобы на Sench touch было несколько слайдов

2 голосов
/ 19 января 2012

Я разрабатываю приложение, в котором при нажатии кнопки «Отправить» в форме оно должно перейти на другой экран.Однако это просто печать результатов за пределами окна и не переход к новому экрану.Я жестко запрограммировал хранилище, чтобы убедиться, что при запуске приложения есть данные, и оно все еще печатает их за пределами видимой области.

Вот мой 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 Ответ

0 голосов
/ 20 января 2012

Хорошо,

SearchJobsForm.form - это ваша главная панель, она будет содержать два компонента: searchForm (с вводом текста / выбора) и панель / список результатов, В обратном вызове мы будем скрывать () форму и показывать () список результатов. Это не чистый код, но самый простой и поцелуй, который я могу получить от вашего.

  • Сначала давайте создадим список jobsList

// У него есть идентификатор (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 () ваш лучший друг и избавит вас от многих головных болей.

...