이 예제를 로컬 에 포함시킬 수있는 사람이 있습니까?
내 로컬 프로젝트에서 동일한 작업을 시도하면 탭의 오른쪽 부분 만 표시되고 다른 왼쪽 부분은 숨겨집니다. 글리프가 아닌 iconCls를 사용합니다.
문제는 제대로 컴파일 할 수 없다는 것입니다.
@include extjs-tab-panel-ui (
$ ui : 'navigation',
$ ui-tab-background-color : transparent,
$ ui-tab-background-color-over : # 505050,
$ ui-tab-background-color -active : # 303030,
$ ui-tab-background-gradient : 'none',
$ ui-tab-background-gradient-over : 'none',
$ ui-tab-background-gradient-active : 'none',
$ ui-tab-color : #acacac,
$ ui-tab-color-over : # c4c4c4,
$ ui-tab-color-active : #fff,
$ ui-tab-glyph-color : #acacac,
$ ui- tab- glyph-color-over : # c4c4c4,
$ ui-tab-glyph-color-active : #fff,
$ ui-tab-glyph-opacity : 1,
$ ui-tab-border-radius : 0,
$ ui-tab- 테두리 너비 : 0,
$ ui-tab- 내부 테두리 너비 : 0,
$ ui-tab-padding : 24px,
$ ui-tab-margin : 0,
$ ui-tab-font-size : 15px,
$ ui-tab-font-size -over : 15px,
$ ui-tab-font-size-active : 15px,
$ ui-tab-line-height : 19px,
$ ui-tab-font-weight : bold,
$ ui-tab-font-weight-over : 굵게,
$ ui-tab-font-weight-active : 굵게,
$ ui-tab-icon-width : 24px,
$ ui-tab-icon-height : 24px,
$ ui-bar-background-color : # 404040,
$ ui-bar-background-gradient : 'none',
$ ui-bar-padding : 0,
$ ui-strip-height : 0
);
이 스크립트를 extjs 테마에 추가하고 컴파일하는 방법은 무엇입니까? 테마 재 구축이 필요합니까?
저는 ExtJS의 전문가가 아닙니다. 내 프로젝트 중 하나에서 구현하기 위해 ExtJS 5를 배우고 있습니다. 내 설정에서 측면 탐색 패널이 작동하도록 할 수 있습니다. 단계 :
app / view / tab / 디렉토리에 "NavigationTabs.js"라는 이름으로 "NavigationTabs"보기를 만들고 아래 코드를 배치합니다.
Ext.define('MyProject.view.tab.NavigationTabs', {
extend: 'Ext.tab.Panel',
xtype: 'navigation-tabs',
//<example>
exampleTitle: 'Navigation Tabs',
otherContent: [{
type: 'Styles',
path: 'sass/src/view/tab/NavigationTabs.scss'
}],
//</example>
height: 400,
width: 600,
ui: 'navigation',
tabPosition: 'left',
tabRotation: 0,
tabBar: {
layout: {
pack: 'center'
},
border: false
},
defaults: {
iconAlign: 'top',
bodyPadding: 15
},
items: [{
title: 'Home',
glyph: 72,
html: "Some text"
}, {
title: 'Users',
glyph: 117,
html: "Some other text"
}, {
title: 'Groups',
glyph: 85,
html: "Some more text"
}, {
title: 'Settings',
glyph: 42,
html: "Extra text"
}]
});
이제 sass / src / view / tab / 디렉터리에 NavigationTabs.scss라는 파일을 만들고이 파일에 sass 코드 (질문에서 지정한)를 배치합니다.
app / view / main / 디렉터리에있는 Main.js 파일에서 항목 목록에 다음을 포함합니다.
items: [
{
...
...
},
{
region: 'west',
xtype: 'navigation-tabs',
reference: 'navigation'
}],
앱과 scss가 컴파일 될 때까지 기다립니다 (sencha-cmd watch 명령이 코드를 자동으로 컴파일 함).
희망, 이것이 유용 할 것입니다.
참고 : 위 코드는 ExtJS5 Kitchen Sink 예제에서 가져온 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다