1. 홈
  2. 질의 응답
  3. 두 개의 목록 패널을 적절하게 (동적으로) 크기를 조정하는 방법

두 개의 목록 패널을 적절하게 (동적으로) 크기를 조정하는 방법

2012-03-27 3 views
0

Sencha Touch 1.1을 사용하고 있으며 Sencha에서 올바른 방법을 찾을 수 없었던 UI에 악화되는 작은 버그가 발생했습니다. .두 개의 목록 패널을 적절하게 (동적으로) 크기를 조정하는 방법

두 개의 목록이 포함 된 검색 패널에 두 번째 목록이 첫 번째 목록 바로 아래에 접히는 것 같습니다. 따라서 첫 번째 목록은 첫 번째 목록에서 두 번째 목록의 첫 번째 행을 덮고 있습니다. 명부.

아주 긴 코드 조각입니다. 제어 할 수 없다면 유감스럽게 생각합니다. 필자는 정확한 테스트 케이스 (Sencha 기본 코드 제외)를 제공하기를 원했습니다.

나는이 예를 제공하기 위해 앱을 적게 먹었다.

"작업 내보내기 검색"옵션에 들어가서 작업 주문 필드에 2를 입력하고 "확인"을 클릭하면로드하는 데 시간이 걸릴 것입니다. 결과가 표시됩니다.

하나의 행을 반환하는 첫 번째 목록에 작은 작업 주문 정보를 넣습니다. 여러 행을 포함하는 두 번째 목록에는 내보내기 내역이 있습니다. 두 번째 목록을 아래로 내리면 첫 번째 행이 첫 번째 목록 뒤에 함몰 된 것을 볼 수 있습니다.

doLayout() 응용 프로그램 주위에 아무것도 수행하지 않은 및 레이아웃 "적합"구성 옵션이 두 목록 간의 UI 관계를 제외하고 잘 작동하는 것 같습니다. 나는 ui가 첫 번째 목록이 렌더링시 어떤 공간을 차지하고 있는지 알지 못한다고 확신하지만 확실하지 않습니다.

나는 정상에 당신의 시간 동안 여기에 감사드립니다, 당신은 바닥에 그것을 만들지 않을 수도 있습니다.

풍부한

내 모델 :

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 (intitializers)

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 :

// 메인 화면 (HOME) AdSel.views.consoleBar = 새로운 Ext.Toolbar ({ ID : 'consoleBar', 제목 : '작업 관리 콘솔 ' });

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


    } 
});

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

나는 대부분의 인덱스를 필요로하지 않습니다 가정입니다.

폼 패널 : 나는 패널에 함께 두 개의 동적 목록을 쌓아 대신 양식을 사용하여 내 다른 접근 방식을 게시

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

출처

2012-03-27 rwheadon

+0

글쎄, 나는 펀드했고 헤더 정보에 대한 필터링 된 데이터로 채워진 양식을 추가했습니다. 거의 좋아 보이지 않지만 지금은 효과가 있습니다. – rwheadon

답변

0

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

    ] 
});

원하는 형식으로 원하는 레코드를로드하고 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); 
      });

출처

2012-03-28 13:24:26 rwheadon

관련 문제

 관련 문제