2011-10-04 3 views
0

:에 extjs 레이아웃에 extjs 뷰포트 내부에 내장 HTML 내가이 extjs라는 관점 내에서 다음과 같은 HTML 레이아웃하려고

Ext.application({ 
name: 'HelloExt', 
launch: function() { 
    Ext.create('Ext.container.Viewport', { 
     layout: 'fit', 
     items: [ 
      { 
       title: 'Hello Ext', 
       html : 'Hello! Welcome to Ext JS.' 
      } 
     ] 
    }); 
} 

});

되는 HTML :

<div id='logo'></div> 
<header class='search'> 
    <input type="search"> 
</header> 
<br class="clear" /> 
<header class='main'> 
    <nav class='main'> 
     <ul> 
      <li>Dashboard</li> 
      <li>Claims Handling</li> 
      <li>Reports</li> 
      <li>Accounts</li> 
     </ul> 
    </nav> 
    <nav class='menu'> 
     <ul> 
      <li>Mini Portal</li> 
      <li>Authorize Transaction</li> 
      <li>Insert Invoice Number</li> 
      <li>Add Batch Claims</li> 
     </ul> 
    </nav> 
</header> 
<section id='container'> 
    <div class='head'> 
     <header class='sub'> 
      <h1>Authorize Transaction</h1> 
      <nav class='sub'> 
       <ul> 
        <li><a href="">Authorize</a></li> 
        <li><a href="">Insert Number</a></li> 
        <li><a href="">Add Batch Claims</a></li> 
        <li><a href="">Change Details</a></li> 
       </ul> 
      </nav> 
          <section class="table"></section> 
          <div id="forms"></div> 
     </header> 

    </div> 
</section> 

사람이이 작업을 수행 할 수 있는지 설명해주십시오 수 있을까? http://pastebin.com/7muECqsQ 을하고 뷰포트

Ext.application({name: 'HelloExt',launch: function() { 
Ext.create('Ext.container.Viewport', { 
    layout: 'fit', 
    items: [ 
     { 
      title: 'Hello Ext', 
      html : innerHtml //your above html 
     } 
    ] 
}); 

} }) 구성 할 때 다음 그냥 참조;을 :

+0

뷰포트에 html을 넣으려면 왜 html 속성을 'Hello!'로 설정해야합니까? Ext JS에 오신 것을 환영합니다 ... '? 또는 다른 것을 시도하고 있습니까? –

답변

0

이처럼 HTML 서식을 수

이렇게하는 데는 몇 가지 다른 방법이 있습니다. Template/XTemplate을 생성하고이를 Viewport 본문에도 적용 할 수 있습니다.