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

2975 단어 SenchaExtJS화목하다Touch
원문 링크: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'
}
    GraphQL+Mongodb.간단한 방법.
    ExtJs 패널에서 요소 값 보기 [html 값 요청]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage