Fatal编程技术网
  • sencha-touch/
  • Sencha touch 如何使两个列表面板正确调整大小（动态）

Sencha touch 如何使两个列表面板正确调整大小（动态）

sencha-touch

Sencha touch 如何使两个列表面板正确调整大小（动态）,sencha-touch,ext.list,Sencha Touch,Ext.list,我正在使用Sencha Touch 1.1，在我的UI中遇到了一个令人恼火的小错误，我无法找到在Sencha中解决这个问题的正确方法 症状是，在包含两个列表的搜索面板中，第二个列表似乎直接折叠在第一个列表下，因此在我的示例中，第一个列表是一行，它覆盖了第二个列表的第一行 这是一段相当长的代码片段，如果我有点失控，请原谅。我只是想提供我的确切测试用例，减去sencha基本代码 我已经淡化了应用程序，以提供此示例 如果您花时间加载它，您会发现，如果您进入“职务导出搜索”选项，在“职务顺序”字段中输入

我正在使用Sencha Touch 1.1，在我的UI中遇到了一个令人恼火的小错误，我无法找到在Sencha中解决这个问题的正确方法

症状是，在包含两个列表的搜索面板中，第二个列表似乎直接折叠在第一个列表下，因此在我的示例中，第一个列表是一行，它覆盖了第二个列表的第一行

这是一段相当长的代码片段，如果我有点失控，请原谅。我只是想提供我的确切测试用例，减去sencha基本代码

我已经淡化了应用程序，以提供此示例

如果您花时间加载它，您会发现，如果您进入“职务导出搜索”选项，在“职务顺序”字段中输入2，然后单击“检查”！结果将显示

我在返回一行的第一个列表中添加了一点工单信息。第二个包含多行的列表包含导出历史详细信息。向下拉第二个列表，您会看到第一行已塞在第一个列表后面

在应用程序中移动doLayout没有任何作用，除了这两个列表之间的ui关系外，layout-fit-config选项似乎工作正常。我假设ui只是不知道第一个列表在渲染时占用了任何空间，但我不确定

我会继续说谢谢你在这里的时间在顶部，你可能不会到底部

丰富的

我的模型：

我的店铺：

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=新的外部工具栏{ id:'控制台'， 标题：“作业管理控制台” };

job-screens.js

exporthistory-screens.js

我假设大多数人不需要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>
发布我的替代方法，即我使用表格而不是将两个动态列表堆叠在一个面板中：

窗体面板

然后将所需的记录加载到表单中，并在表单中添加一点代码来检查它！按钮：

            theHeaderStore = Ext.getStore('exactMatchJobStore');

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

            theHeaderStore.on('datachanged', function(){
                var selectedNote = this.first();
                AdSel.views.joborderPostingHistoryHeaderInfoForm.loadRecord(selectedNote);
            });
好吧，我投了一票，只是添加了一个表格，我用过滤后的数据填充表格的标题信息。它看起来没那么漂亮，但现在可以用了。 
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'});              
        }


    }
});

//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>'
});

//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>'
});

<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>

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;
                            }
                    }
        }

    ]
});

            theHeaderStore = Ext.getStore('exactMatchJobStore');

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

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