ExtJS 6의 일부 스타일 클래스 구성 항목

원문 링크:https://blog.csdn.net/lovelyelfpop/article/details/78878842
스타일 클래스 설정 항목은 다음과 같은 네 가지가 있습니다. baseCls,classCls,cls,userCls는 서로 다른 사용 장소를 가지고 있습니다.

클래스를 정의할 때 사용(Ext.define)

즉, 컨트롤 클래스를 정의할 때, 컨트롤 클래스만의 특징을 대표한다

baseCls

이름은 일반적으로 x-xtype이다. 예를 들어 x-button

설정이 없으면 classCls를 찾고, classCls가 설정되지 않으면 보통 x-xtype

클래스 정의에서만 사용되며 동적 setBaseCls

ui와 관련된button의baseCls: 'x-button',ui를action으로 설정하면 스타일류x-button-action

가 생성됩니다

classCls

자류의classCls는 부류의classCls와 누적된다. 예를 들어container의classCls: 'x-container',toolbar의classCls: 'x-toolbar',toolbar는container를 계승하기 때문에 마지막에toolbar의dom 요소에class="x-container x-toolbar"가있다.또한dialog는x-container x-panel x-dialog,즉,dialog는panel을 계승하기 때문에panel은container

를 계승한다.

cls

클래스를 정의할 때 사용할 수도 있고 실례화할 때 사용할 수도 있다(아래 참조)

구체적인 컨트롤 유형과 무관하다. 컨트롤 클래스에 스타일을 설정하지만 구체적인 컨트롤 유형과 무관하면cls를 사용할 수 있다. 예를 들어 내가container의 배경색을 회색으로 설정하려면 css.bg-gray { background-color: gray }를 정의한 다음container 설정cls: 'bg-gray'을 하고 특정

을 설정한다.

Ext.define('MyApp.view.UserGrid', {
    extend: 'Ext.grid.Grid',

    cls: 'has-border'
});

.has-border {
    border: solid 1px #dfdfdf;
}

실례화 시 사용

컨트롤을 사용할 때

cls

{
    xtype: 'grid',
    cls: 'has-border'
}

.has-border {
    border: solid 1px #dfdfdf;
}

userCls

{
    xtype: 'grid',
    userCls: 'has-border'
}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JSON 데이터의 키 이름을 원 라이너로 쉼표로 구분하여 얻습니다.

기존 JSON 데이터에서 복사하면 손 입력의 번거로움은 줄일 수 있지만, 항목수가 많은 경우 복사 하는 것도 의외로 귀찮습니다. 그래서 기존 JSON 데이터의 키 이름을 쉼표로 구분하여 얻는 원라이너를 작성해 보겠습...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.