Как получить две панели списка для правильного изменения размера (динамический) - PullRequest
Новая
       12

Как получить две панели списка для правильного изменения размера (динамический)

0 голосов
/ 27 марта 2012

Я использую Sencha Touch 1.1 и столкнулся с отягчающей маленькой ошибкой в ​​моем пользовательском интерфейсе, из-за которой мне не удалось найти правильный способ адресации в Sencha.

Симптом состоит в том, что в моей панели поиска, содержащей два списка, кажется, что второй список сворачивается непосредственно под первым списком, поэтому в моем примере первого списка, являющегося одной строкой, покрывается первая строка второго списка .

Это довольно длинный фрагмент кода, извините, если я немного вышел из-под контроля. Я просто хотел предоставить свой точный контрольный пример (без базового кода sencha).

Я поливал приложение, чтобы предоставить этот пример.

Если вы потратите время на его загрузку, вы обнаружите, что если вы войдете в опцию «Поиск экспорта работ», введите 2 в поле заказа на работу и нажмете «Проверить!» результаты покажут.

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

перемещение doLayout () по приложению ничего не сделало, и опция конфигурации "fit" макета, кажется, работает нормально, за исключением отношения пользовательского интерфейса между этими двумя списками. Я предполагаю, что пользовательский интерфейс просто не знает, что первый список занимает какое-то место при рендере, но я не уверен.

Я просто пойду вперед и скажу спасибо за ваше время, проведенное здесь наверху, вы, возможно, не дойдете до низа.

богатые

Мои модели: 

Ext.regModel('JobModel', {
    idProperty: 'id'
    ,fields: [
        {type: 'int', name: 'id', field: 'id'}
        ,{type: 'string', name: 'market', field: 'market'}
        ,{type: 'string', name: 'client', field: 'client'}
        ,{type: 'string', name: 'title', field: 'title'}
        ,{type: 'string', name: 'owner', field: 'owner'}
    ]
});

Ext.regModel('ExportHistoryModel', {
    idProperty: 'id'
    ,fields: [
        {type: 'int', name: 'id', field: 'id'}
        ,{type: 'string', name: 'date_exported', field: 'date_exported'}
        ,{type: 'int', name: 'rank', field: 'rank'}
        ,{type: 'string', name: 'careersite', field: 'careersite'}
        ,{type: 'int', name: 'job_id', field: 'job_id'}
    ]
});

Ext.regModel('MenuModel', {
    idProperty: 'id',
    fields: [
        { name: 'id', type: 'int' }
        ,{ name: 'title', type: 'string' }
        ,{ name: 'target', type: 'string' }
    ]
});

Мои магазины: 

Ext.regStore('JobStore', {
    model: 'JobModel'
    ,sorters: [{
        property: 'id',
        direction: 'ASC'
    }]
    ,proxy: {
        type: 'localstorage',
        id: 'adsel-app-jobstore'
    }
    ,data: [
    {id: 1, market: 'Boston', client: 'Creme Co.', title: 'Baker', owner: 'rwheadon'}
    ,{id: 2, market: 'Miami', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
    ,{id: 3, market: 'Dallas', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
    ,{id: 4, market: 'Chicago', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
    ,{id: 6, market: 'Fargo', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
    ,{id: 10, market: 'Boise', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
    ,{id: 21, market: 'Miami2', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
    ,{id: 31, market: 'Dallas2', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
    ,{id: 41, market: 'Chicago2', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
    ,{id: 61, market: 'Fargo2', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
    ,{id: 101, market: 'Boise2', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
    ,{id: 22, market: 'Miami3', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
    ,{id: 32, market: 'Dallas3', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
    ,{id: 42, market: 'Chicago3', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
    ,{id: 62, market: 'Fargo3', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
    ,{id: 102, market: 'Boise3', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
    ,{id: 23, market: 'Miami4', client: 'Vice Inc.', title: 'Administrative Asst.', owner: 'rwheadon'}
    ,{id: 33, market: 'Dallas4', client: 'Cowboy LLC', title: 'Customer Service', owner: 'rwheadon'}
    ,{id: 43, market: 'Chicago4', client: 'Family Care DDM', title: 'Hygenist', owner: 'rwheadon'}
    ,{id: 63, market: 'Fargo4', client: 'Brokers Ltd.', title: 'Sales Associate', owner: 'rwheadon'}
    ,{id: 103, market: 'Boise4', client: 'Tate R. Well Co.', title: 'Customer Service Representative', owner: 'rwheadon'}
    ]
});

Ext.regStore('ExportHistoryStore', {
    model: 'ExportHistoryModel'
    ,sorters: [{
        property: 'rank',
        direction: 'ASC'
    },
    {property: 'job_id', direction: 'ASC'}
    ,{property: 'id', direction:'ASC'}]
    ,proxy: {
        type: 'localstorage',
        id: 'adsel-app-exporthistorystore'
    }
    ,data: [
        {id: 1, date_exported: '2012-03-26 08:53:00', rank: 1, careersite: 'Monster', job_id: 1}
        ,{id: 2, date_exported: '2012-03-26 08:53:00', rank: 2, careersite: 'Monster', job_id: 2}
        ,{id: 3, date_exported: '2012-03-26 08:53:00', rank: 3, careersite: 'Dice', job_id: 1}
        ,{id: 4, date_exported: '2012-03-26 08:53:00', rank: 4, careersite: 'Dice', job_id: 2}
       ,{id: 5, date_exported: '2012-03-26 08:53:00', rank: 5, careersite: 'Dice', job_id: 3}
       ,{id: 6, date_exported: '2012-03-26 08:53:00', rank: 6, careersite: 'Dice', job_id: 4}
       ,{id: 7, date_exported: '2012-03-26 08:53:00', rank: 7, careersite: 'Monster', job_id: 3}
       ,{id: 8, date_exported: '2012-03-26 08:53:00', rank: 8, careersite: 'Monster', job_id: 4}
       ,{id: 9, date_exported: '2012-03-26 08:53:00', rank: 9, careersite: 'Monster', job_id: 5}
       ,{id: 10, date_exported: '2012-03-26 08:53:00', rank: 10, careersite: 'Monster', job_id: 10}
        ,{id: 21, date_exported: '2012-03-26 08:53:00', rank: 2, careersite: 'Monster', job_id: 2}
        ,{id: 31, date_exported: '2012-03-26 09:53:00', rank: 3, careersite: 'Dice', job_id: 1}
        ,{id: 41, date_exported: '2012-03-26 09:53:00', rank: 4, careersite: 'Dice', job_id: 2}
       ,{id: 51, date_exported: '2012-03-26 09:53:00', rank: 5, careersite: 'Dice', job_id: 3}
       ,{id: 61, date_exported: '2012-03-26 09:53:00', rank: 6, careersite: 'Dice', job_id: 4}
       ,{id: 71, date_exported: '2012-03-26 09:53:00', rank: 7, careersite: 'Monster', job_id: 3}
       ,{id: 81, date_exported: '2012-03-26 09:53:00', rank: 8, careersite: 'Monster', job_id: 4}
       ,{id: 91, date_exported: '2012-03-26 09:53:00', rank: 9, careersite: 'Monster', job_id: 5}
       ,{id: 101, date_exported: '2012-03-26 09:53:00', rank: 10, careersite: 'Monster', job_id: 10}
        ,{id: 22, date_exported: '2012-03-26 09:53:00', rank: 2, careersite: 'Monster', job_id: 2}
        ,{id: 32, date_exported: '2012-03-26 11:53:00', rank: 3, careersite: 'Dice', job_id: 1}
        ,{id: 42, date_exported: '2012-03-26 11:53:00', rank: 4, careersite: 'Dice', job_id: 2}
       ,{id: 52, date_exported: '2012-03-26 11:53:00', rank: 5, careersite: 'Dice', job_id: 3}
       ,{id: 62, date_exported: '2012-03-26 11:53:00', rank: 6, careersite: 'Dice', job_id: 4}
       ,{id: 72, date_exported: '2012-03-26 11:53:00', rank: 7, careersite: 'Monster', job_id: 3}
       ,{id: 82, date_exported: '2012-03-26 11:53:00', rank: 8, careersite: 'Monster', job_id: 4}
       ,{id: 92, date_exported: '2012-03-26 11:53:00', rank: 9, careersite: 'Monster', job_id: 5}
       ,{id: 102, date_exported: '2012-03-26 11:53:00', rank: 10, careersite: 'Monster', job_id: 10}
        ,{id: 23, date_exported: '2012-03-26 11:53:00', rank: 2, careersite: 'Monster', job_id: 2}
        ,{id: 33, date_exported: '2012-03-26 13:53:00', rank: 3, careersite: 'Dice', job_id: 1}
        ,{id: 43, date_exported: '2012-03-26 13:53:00', rank: 4, careersite: 'Dice', job_id: 2}
       ,{id: 53, date_exported: '2012-03-26 13:53:00', rank: 5, careersite: 'Dice', job_id: 3}
       ,{id: 63, date_exported: '2012-03-26 13:53:00', rank: 6, careersite: 'Dice', job_id: 4}
       ,{id: 73, date_exported: '2012-03-26 13:53:00', rank: 7, careersite: 'Monster', job_id: 3}
       ,{id: 83, date_exported: '2012-03-26 13:53:00', rank: 8, careersite: 'Monster', job_id: 4}
       ,{id: 93, date_exported: '2012-03-26 13:53:00', rank: 9, careersite: 'Monster', job_id: 5}
       ,{id: 103, date_exported: '2012-03-26 13:53:00', rank: 10, careersite: 'Monster', job_id: 10}
        ,{id: 24, date_exported: '2012-03-26 13:53:00', rank: 2, careersite: 'Monster', job_id: 2}
        ,{id: 34, date_exported: '2012-03-26 15:53:00', rank: 3, careersite: 'Dice', job_id: 1}
        ,{id: 44, date_exported: '2012-03-26 15:53:00', rank: 4, careersite: 'Dice', job_id: 2}
       ,{id: 54, date_exported: '2012-03-26 15:53:00', rank: 5, careersite: 'Dice', job_id: 3}
       ,{id: 64, date_exported: '2012-03-26 15:53:00', rank: 6, careersite: 'Dice', job_id: 4}
       ,{id: 74, date_exported: '2012-03-26 15:53:00', rank: 7, careersite: 'Monster', job_id: 3}
       ,{id: 84, date_exported: '2012-03-26 15:53:00', rank: 8, careersite: 'Monster', job_id: 4}
       ,{id: 94, date_exported: '2012-03-26 15:53:00', rank: 9, careersite: 'Monster', job_id: 5}
       ,{id: 104, date_exported: '2012-03-26 15:53:00', rank: 10, careersite: 'Monster', job_id: 10}
        ,{id: 25, date_exported: '2012-03-26 15:53:00', rank: 2, careersite: 'Monster', job_id: 2}
        ,{id: 35, date_exported: '2012-03-26 20:53:00', rank: 3, careersite: 'Dice', job_id: 1}
        ,{id: 45, date_exported: '2012-03-26 20:53:00', rank: 4, careersite: 'Dice', job_id: 2}
       ,{id: 55, date_exported: '2012-03-26 20:53:00', rank: 5, careersite: 'Dice', job_id: 3}
       ,{id: 65, date_exported: '2012-03-26 20:53:00', rank: 6, careersite: 'Dice', job_id: 4}
       ,{id: 75, date_exported: '2012-03-26 20:53:00', rank: 7, careersite: 'Monster', job_id: 3}
       ,{id: 85, date_exported: '2012-03-26 20:53:00', rank: 8, careersite: 'Monster', job_id: 4}
       ,{id: 95, date_exported: '2012-03-26 20:53:00', rank: 9, careersite: 'Monster', job_id: 5}
       ,{id: 106, date_exported: '2012-03-26 20:53:00', rank: 10, careersite: 'Monster', job_id: 10}
       ,{id: 1116, date_exported: '2012-03-26 08:53:00', rank: 11, careersite: 'Craigslist', job_id: 10}
       ,{id: 1216, date_exported: '2012-03-26 08:53:00', rank: 12, careersite: 'Craigslist', job_id: 6}
       ,{id: 1316, date_exported: '2012-03-26 08:53:00', rank: 13, careersite: 'Craigslist', job_id: 3}
       ,{id: 1416, date_exported: '2012-03-26 08:53:00', rank: 14, careersite: 'Craigslist', job_id: 1}
       ,{id: 1516, date_exported: '2012-03-26 08:53:00', rank: 15, careersite: 'Craigslist', job_id: 4}
       ,{id: 1616, date_exported: '2012-03-26 08:53:00', rank: 16, careersite: 'Monster', job_id: 6}
    ]
});

Ext.regStore('HomeMenuStore', {
    model: 'MenuModel'
    ,sorters: [{
        property: 'title',
        direction: 'ASC'
    }]
    ,proxy: {
        type: 'localstorage',
        id: 'adsel-app-homemenustore'
    }
    ,data: [
//    {id: 1, title: 'Status', targetMenu: 'statusList'}
    {id:2, title:'Jobs', target: 'jobListPanel'}
    ,{id:3, title:'Export History', target: 'exportListPanel'}
    ,{id:4, title: 'Job Export Search', target: 'jobExportSearchPanel'}
    ]
});

overlappingListProblem.js (инициализаторы) 

var App;

// new Ext.Application({
new Ext.Application({
    name : 'AdSel',
    useLoadMask : true,
    launch: function (){
    App = this;
//initialization
            AdSel.views.homeMenuPanel = new Ext.Panel({
                id: 'homeMenuPanel'
                ,layout: 'fit'
                ,dockedItems: [
                        AdSel.views.consoleBar
                ]
                ,items: [
                        AdSel.views.consoleList
                ]
            });

            AdSel.views.jobListPanel = new Ext.Panel({
                id: 'jobListPanel'
                ,layout: 'fit'
                ,dockedItems: [
                        AdSel.views.jobsToolbar
                ]
                ,items: [
                        AdSel.views.jobList
                ]
            });

            AdSel.views.exportListPanel = new Ext.Panel({
                id: 'exportListPanel'
                ,layout: 'fit'
                ,dockedItems: [
                        AdSel.views.exporthistoryToolbar
                ]
                ,items: [
                        AdSel.views.exporthistoryList
                ]
            });

            AdSel.views.jobExportSearchPanel = new Ext.Panel({
                id: 'jobExportSearchPanel'
                ,layout: 'fit'
                ,dockedItems: [
                        AdSel.views.jobHistoryCheckerToolbar
                        ,AdSel.views.joborderHistoryCheckForm
                        ,AdSel.views.joborderPostingHistoryHeaderInfo
                ]
                ,items: [
                        AdSel.views.joborderPostingHistoryResultList
                ]
            });

//render
            AdSel.views.viewport = new Ext.Panel({
                 fullscreen : true
                 ,layout : 'card'
                 ,cardAnimation : 'slide'
                 ,items: [

                        AdSel.views.homeMenuPanel
                        ,AdSel.views.jobListPanel
                        ,AdSel.views.exportListPanel
                        ,AdSel.views.jobExportSearchPanel
                    ]
            })
    }
});

hardwiredmenu-screens.js:

// ГЛАВНЫЙ ЭКРАН (ГЛАВНАЯ) AdSel.views.consoleBar = new Ext.Toolbar ({ id: 'consoleBar', title: 'Консоль управления заданиями' }); 

AdSel.views.consoleList = new Ext.List({
    id: 'consoleList'
    ,store: 'HomeMenuStore'
,disableSelection: true
    ,itemTpl: '<div class="list-item-title">{title}</div>'
    ,onItemDisclosure: function (record) {
        var selectedNote=record;
        var theTarget = selectedNote.data.target;
        if( theTarget == 'jobExportSearchPanel') {
            Ext.getStore('JobStore').filter({property:'id', value: 0, exactMatch: true});
            Ext.getStore('ExportHistoryStore').filter({property:'job_id', value: 0, exactMatch: true});
            AdSel.views.viewport.setActiveItem(theTarget, {type: 'slide', direction: 'left'})
        } else {
            AdSel.views.viewport.setActiveItem(theTarget, {type: 'slide', direction: 'left'});              
        }


    }
});

Job-screens.js 

//JOBS SCREEN
AdSel.views.jobsToolbar = new Ext.Toolbar({
    id: 'jobsToolbar'
    ,ui: 'light'
    ,defaults: {
        iconMask: true
        ,ui: 'plain'
    }
    ,title: 'Jobs'
    ,items: [
        {
            iconCls: 'home',
            handler: function () {
                AdSel.views.viewport.setActiveItem('homeMenuPanel', {type: 'slide', direction: 'right'});
            }
        }
    ]
});

AdSel.views.jobList = new Ext.List({
    id: 'jobList'
    ,store: 'JobStore'
    ,disableSelection: true
    ,itemTpl: '<div class="list-item-title">{title} ({client}) in {market} entered by {owner}</div>'
});

//JOB EXPORTHISTORY SEARCH SCREEN
/*
 * *********************************************** *
 * *********************************************** *
 * *********************************************** *
 *                  JOB HISTORY                    *
 * *********************************************** *
 * *********************************************** *
 * *********************************************** *
 */
AdSel.views.jobHistoryCheckerToolbar = new Ext.Toolbar({
    id: 'jobHistoryCheckerToolbar'
    ,ui: 'light'
    ,dock: 'top'
    ,defaults: {
        iconMask: true
        ,ui: 'plain'
    }
//    ,title: 'Job Posting History'
    ,title: 'Job Export History'
    ,items: [
        {
            iconCls: 'home'
            ,id: 'jobhistorycheckerHomeBtn'
            ,handler: function(){
                AdSel.views.joborderHistoryCheckForm.reset();
                Ext.getStore('JobStore').clearFilter();
                Ext.getStore('ExportHistoryStore').clearFilter();
                AdSel.views.viewport.setActiveItem('homeMenuPanel', {type: 'slide', direction: 'right'});
            }
        }
        ,{xtype: 'spacer'}
        ,{
            text: 'Check it!'
            ,ui: 'action'
            ,handler: function () {
                    var ovrEditor = AdSel.views.joborderHistoryCheckForm;
                    var filterid = ovrEditor.getValues().joborderid;
                    var theHeaderStore = Ext.getStore('JobStore');

                    theHeaderStore.clearFilter();
                    theHeaderStore.filter({property:'id', value: filterid, exactMatch: true});

                    var theHistoryStore = Ext.getStore('ExportHistoryStore');
                    theHistoryStore.clearFilter();
                    theHistoryStore.filter({property:'job_id', value: filterid, exactMatch: true});


                    var theHeaderList = AdSel.views.joborderPostingHistoryHeaderInfo;
                    theHeaderList.refresh();
                    var theHistoryList = AdSel.views.joborderPostingHistoryResultList;
                    theHistoryList.refresh();
                    AdSel.views.jobExportSearchPanel.doLayout();
                }

        }

    ]
});

AdSel.views.joborderHistoryCheckForm = new Ext.form.FormPanel({
    id: 'joborderHistoryCheckForm'
    ,standardSubmit: false
    ,submitOnAction: false
    ,items: [
        {
            xtype: 'textfield'
            ,id: 'joborderhistorycheckform-joborderid'
            ,name: 'joborderid'
            ,label: 'JO Number'
        }
    ]
});

AdSel.views.joborderPostingHistoryHeaderInfo = new Ext.List({
    id: 'joborderPostingHistoryHeaderInfo'
    // ,layout: 'fit'
    ,store: 'JobStore'
    ,disableSelection: true
    ,itemTpl: '<div class="list-item-title-dark"><b>Job Order: </b>{id}<br/>' +
            '<b>Title: </b>{title}<br/><b>Client: </b>{client}</div>'

});

AdSel.views.joborderPostingHistoryResultList = new Ext.List({
    id: 'joborderPostingHistoryResultList'
    // ,layout: 'fit'
    ,store: 'ExportHistoryStore'
    ,disableSelection: true
    ,itemTpl: '<div class="list-item-title">Runtime: {date_exported}<br/>' +
            'Career Site: {careersite}<br/>Rank: {rank}</div>'
});

exporthistory-screens.js 

//EXPORTS SCREEN
AdSel.views.exporthistoryToolbar = new Ext.Toolbar({
    id: 'jobsToolbar'
    ,ui: 'light'
    ,defaults: {
        iconMask: true
        ,ui: 'plain'
    }
    ,title: 'Export History'
    ,items: [
        {
            iconCls: 'home',
            handler: function () {
                AdSel.views.viewport.setActiveItem('homeMenuPanel', {type: 'slide', direction: 'right'});
            }
        }
    ]
});


AdSel.views.exporthistoryList = new Ext.List({
    id: 'exporthistoryList'
    ,store: 'ExportHistoryStore'
    ,disableSelection: true
    ,itemTpl: '<div class="list-item-title">{date_exported} exported job# {job_id} to {careersite} (ranked {rank})</div>'
});

Я предполагаю, что большинству не понадобится index.html, но я мог бы также сжечь еще несколько байтов: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="touch/1.1.1/resources/css/sencha-touch.css"/>
    <script type="text/javascript" src="touch/1.1.1/sencha-touch.js"></script>
        <script type="text/javascript" src="app/overlappingListProblem.js"></script>
    <script type="text/javascript" src="app/models/models.js"></script>
    <script type="text/javascript" src="app/models/stores.js"></script>

    <script type="text/javascript" src="app/viewers/exporthistory-screens.js"></script>
    <script type="text/javascript" src="app/viewers/hardwiredmenu-screens.js"></script>
    <script type="text/javascript" src="app/viewers/job-screens.js"></script>
    </head>
    <body>

    </body>
</html>

1 Ответ

0 голосов
/ 28 марта 2012

Публикация моего альтернативного подхода, в котором я использую форму вместо объединения двух динамических списков на панели:

Панель форм 

AdSel.views.joborderPostingHistoryHeaderInfoForm = new Ext.form.FormPanel({
    id: 'joborderPostingHistoryHeaderInfoForm'
    ,standardSubmit: false
    ,submitOnAction: false
    ,items: [
        {
            xtype: 'textfield'
            ,id: 'joborderPostingHistoryHeaderInfoForm-adTitle'
            ,name: 'adTitle'
            ,label: 'Job Title'
            ,listeners: {
                           afterrender: function(ele) {
                                 ele.fieldEl.dom.readOnly = true;
                            }
                    }
        }
        ,{
            xtype: 'textfield'
            ,id: 'joborderPostingHistoryHeaderInfoForm-clientName'
            ,name: 'clientName'
            ,label: 'Client'
            ,listeners: {
                           afterrender: function(ele) {
                                 ele.fieldEl.dom.readOnly = true;
                            }
                    }
        }

    ]
});

А затем загрузите нужную запись в эту форму, добавив небольшой код в Check It! Кнопка: 

            theHeaderStore = Ext.getStore('exactMatchJobStore');

            theHeaderStore.removeAll();
            theHeaderStore.load({
                params:{id: filterid}
            });

            theHeaderStore.on('datachanged', function(){
                var selectedNote = this.first();
                AdSel.views.joborderPostingHistoryHeaderInfoForm.loadRecord(selectedNote);
            });
...