Ext JS 최신 기술 - 2014 - 9 - 10

원문: Top Support Tips
Greg Barry: 격자 셀 의 초점 삭제
Ext JS 5.0.1 에 접근 성과 ARIA 지원 과 관련 된 현저 한 개선 사항 을 추가 했다.이러한 새로운 기능 을 사용 하 는 것 을 권장 하지만 기본 스타일 은 모든 상황 에서 가장 이상 적 인 상황 에 이 르 지 못 할 수 있 습 니 다.사실 셀 테두리 에서 초점 을 맞 추 는 것 은 모든 상황 에 적합 하지 않다.초점 스타일 을 조정 하려 면 SASS 변 수 를 수정 하고 스타일 을 재 컴 파일 하 는 것 이 가장 좋 습 니 다.격자 보기에 서 셀 초점 의 SASS 변 수 를 찾 을 수 있 습 니 다. 대상 은 다음 과 같 습 니 다.
    $grid-row-cell-focus-background-color    $grid-row-cell-focus-border-color    $grid-row-cell-focus-border-inset    $grid-row-cell-focus-border-style    $grid-row-cell-focus-border-width    $grid - row - cell - focus - color 는 상기 SASS 변 수 를 수정 하고 스타일 을 컴 파일 하 는 것 을 권장 하지만 다음 CSS 선택 기 를 사용 하여 격자 셀 의 테 두 리 를 수정 하거나 숨 길 수 있 습 니 다.

.x-grid-item-focused .x-grid-cell-inner:before {
    border: 0;
}

Fiddle 에서 CSS 를 다시 쓴 후의 예 시 를 볼 수 있 습 니 다.접근 성 변경 과 관련 된 더 많은 정 보 는 새로운 접근 성 안내 서 를 방문 하 십시오.
 Mitchell Simoens: 프로 토 타 입 에 인 스 턴 스 를 만 드 는 것 은 나 쁜 생각 입 니 다.
Ext. define 을 사용 하여 새로운 종 류 를 정의 할 때 다음 코드 처럼 하지 말고 Ext. create 를 사용 하여 원형 에 인 스 턴 스 를 만 듭 니 다.

Ext.define(‘MyApp.view.Main’, {
    extend : ‘Ext.container.Container’,
    xtype  : ‘myapp-main’, 
    requires : [
        ‘MyApp.plugins.Foo’    ], 
    items : [
        Ext.create(‘Ext.Component’, {
            html : ‘Hello’        })
    ], 
    plugins : [
        Ext.create(‘MyApp.plugins.Foo’)
    ]});

대신 설정 대상 에서 클래스 의 별명 을 사용 할 수 있 습 니 다:

Ext.define(‘MyApp.view.Main’, {
    extend : ‘Ext.container.Container’,
    xtype  : ‘myapp-main’, 
    requires : [
        ‘MyApp.plugins.Foo
    ], 
    items : [
        {
            xtype : ‘component’,
            html  : ‘Hello’        }
    ], 
    plugins : [
        {
            ptype : ‘myapp-foo’        }
    ]});

설정 대상 을 사용 하 는 이 유 는 클래스 가 초기 화 될 때 현재 MyApp. view. Main 입 니 다. 설정 대상 에 따라 새로운 인 스 턴 스 를 만 듭 니 다.첫 번 째 코드 세그먼트 와 같은 인 스 턴 스 가 원형 에서 만 들 어 졌 다 면 MyApp. view. Main 의 첫 번 째 인 스 턴 스 는 예상 한 방식 대로 잘 작 동 할 수 있 지만 나중에 만 든 인 스 턴 스 는 예상 한 대로 작 동 하지 않 고 오류 가 발생 할 수 있 습 니 다.Fiddle 에서 왜 원형 에 인 스 턴 스 를 만 드 는 지 알 수 있 습 니 다.