제4장 축복하라!폼과 입력 컨트롤을 모두 ext 스타일로 바꾸다

4.1.ext의form을 쓰지 않아도 돼요. 재미있는 걸 놓치는 게 두렵지 않아요?

처음에 그 입력 컨트롤을 보았는데, 사실은 css 스타일시트를 수정한 것일 뿐이다.Firebug를 켜서dom를 보세요. 그렇긴 합니다. 이 점에서 볼 때 ext를 사용하려고 애쓸 필요가 없는 것 같습니다. 물론 입력 상자만 원한다면 어떤 데이터를 추가하든지 백그라운드로 보내는 것을 누르면 ext가 필요하지 않습니다.
너는 기본적인 데이터로 검사하고 싶지 않니?너는 데이터 검사가 실패했을 때 두드러진 알림 효과가 있기를 원하지 않니?멋진 드롭다운 리스트combox를 원하지 않습니까?너는 네가 꿈을 꿔야만 몽롱하게 볼 수 있는 선택 컨트롤을 원하지 않니?에이, 너도 나처럼 유혹을 참을 수 없다면 욕망의 박자에 따라 ext의form과 입력 컨트롤을 시도해 보라고 충고한다.

4.2.천천히 해라, 우선 form을 하나 세우고 다시 이야기하자

var form = new Ext.form.Form({
    labelAlign: 'right',
    labelWidth: 50
});
form.add(new Ext.form.TextField({
    fieldLabel: ' '
}));
form.addButton(" ");
form.render("form");

간단하게 말하면form을 구성한 다음에 TextField를 넣고 단추를 하나 더 놓고 마지막으로 렌더링 명령을 실행하고 id="form"의 곳에form과 안에 포함된 모든 입력 상자와 단추를 그립니다.졸라매면 다 나와.
그러나 그래도 원각 테두리는form이 가지고 있는 것이 아니므로 조금만 처리하고 html의 작법을 참고하십시오.

<div style="width:220px;margin-left:0px;">
    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
        <h3 style="margin-bottom:5px;">form</h3>
        <div id="form"></div>
    </div></div></div>
    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<div class="x-form-clear"></div>

처음에 끝난div는 원각을 만드는 것입니다. 이것들이 있으면 우리는 어디에서든 이런 원각 형식을 사용할 수 있습니다. form에 국한되지 않습니다.
html 예, 1.x은lingo-sample/1.1.1/04-01.html
2.0의 FormPanel과 1.x에서는 이미 기본적으로 완전히 다르다. 우리 먼저 간단한 예를 보자.
코드는 다음과 같습니다.

var form = new Ext.form.FormPanel({
    defaultType: 'textfield',
    labelAlign: 'right',
    title: 'form',
    labelWidth: 50,
    frame: true,
    width: 220,

    items: [{
        fieldLabel: ' '
    }],
    buttons: [{
        text: ' '
    }]
});
form.render("form");

html에는 그렇게 많은 것이 필요하지 않습니다. divid='form'을 정의하면 이 모든 것을 실현할 수 있습니다.items와buttons가 포함하는 컨트롤과 단추를 지정하면 초기 설정이 더욱 치밀하다는 것을 분명히 느낄 수 있습니다.
지금 먼저 느끼고 우리 뒤에서 자세히 연구합시다. 예는lingo-sample/2.0/04-01입니다.html.

4.3.입력 컨트롤을 마구 훑어보다

형제들은 html 개발 경험을 가지고 있을 것입니다. 어떤 input가 많이 사용되는지 알 수 있습니다. 그래서 우리는 여기서 침을 낭비할 필요가 없습니다. 두 번 훑어봐도 ext의 입력 컨트롤러가 무엇을 하는지 알 수 있습니다.

Text Field, Text Area, Number Field 같은 것들은 당연히 마음대로 입력할 수 있지만..

ComboBox, DateField는 TriggerField에서 계승한다.그들은 생김새가 많지 않다. 모두 입력 상자 오른쪽에 그림을 가지고 클릭한 후에 많은 물건을 튀어나와 선택하게 한다. 입력 상자 안에 표시된 것은 네가 선택한 것이다

Checkbox와 Radio, ext는 너무 많은 봉인이 없고 기본적으로 원래의 방식이다..

Button, 이 동쪽은 사실 보기 좋은div입니다. combox와 마찬가지로 원래의 구성 요소에 대한 미화가 아니라 다시 만든 바퀴입니다.너는 이전의 그런 보기 싫은 type='button'을 사용할 것인지, 아니면 우리의 예쁜 div를 사용할 것인지, 너의 취미를 볼 수 있다.type="submit"과 type="reset"도 마찬가지로 대응하는 구성 요소가 없습니다. 모두 Button을 사용하십시오..

파일 업로드 상자, type='file'. 브라우저의 보안 정책 때문에 파일을 업로드하려면 type='file'을 사용해야 한다. 그리고 우리는 js를 사용하여 업로드 상자의 값을 수정할 수 없기 때문에 매우 답답하다. 현재의 방식은 그것을 숨기고 우리의 예쁜 Button을 클릭할 때 업로드 상자의 클릭 이벤트를 터치하여 업로드의 목적을 달성하는 것이다.이 방면에서 extjs.com 게시판에는 업로드를 실현하는 확장 컨트롤이 많이 있습니다. 참고할 수 있습니다

4.4.시작점이 높게 뿌려져 콤박스에서 위로 튀어나온다.

나는 Text Field, Text Area 같다고 생각한다. 모두 원래의 물건에 css를 마음대로 몇 획 넣어서 만든 것이다. 모두가 사용할 수 있기 때문에 크게 할 만한 것이 없다. 마지막에 종합해 보면 ok이다.이combox는 원래의 select와 아무런 관계가 없고 완전히 div로 다시 그린 것이다.그래서 헤헤~
귀로 듣는 것은 허무하고, 눈으로 보는 것은 사실이다. 우선 이른바 콤박스가 도대체 어떤 모양인지 보자.
예뻐요?예뻐요?아무래도 원생 셀렉트보다 낫네.라라라, 우리 코드 좀 보자.그러나comboBox는 두 가지 구조 방식을 지원하는데, 하나하나 보면.

4.4.1.근거 없이combox를 만들다.

>

4.4.2.select를 combox로 바꾸다.

4.4.3.이례적으로 콤보박스의 내재적 본질을 연구하겠습니다.

4.4.4.헤헤~ 본고장 다 했으니 원거리 방울로 해 봐.

4.4.5.우리 콤박스에 부품을 달아주세요.

4.4.6.네가 무엇을 선택할 때마다 나는 안다

4.4.7.조그마한 수단을 써서 조합에서 알다시피 성시현의 3급 연결.하하~

이것은 상당히 전형적인 사례이다. 예전에는 select로 자주 했는데, 지금은 comboBox로 실현된 효과는 어떨까?

4.4.7.1.먼저 시뮬레이션을 하나 하면 모든 데이터가 로컬에 있다

4.4.7.2.백스테이지 있는 거 하나 더 만들어서 서버에 놔야 돼요.

4.5.그리고 필드 검증, 폼 제출, 폼 레이아웃, 파일 업로드

미완성