ExtJs 11(ExtJs Mvc 사진 관리 중 하나)

앞말
사진 관리는 두 곳에서 사용해야 한다. 하나는 탭 내의 사진 관리이고, 하나는 글 내용을 편집할 때 그림을 삽입하는 창에 끼워 넣는 것이다.따라서 이미지 관리를 확장하는 것이 비교적 편리하다.물론 MVC 모드로 만들어도 되고, 논쟁하지 않고, 토론하지 않아도 된다.
확장은 Scripts\ExtJS\Ux 디렉터리에 써야 합니다. 경로 설정에서 확장 디렉터리가 이곳을 가리키기 때문입니다.디렉토리에 PicManager라는 이름을 생성합니다.js의 스크립트 파일입니다.
슬라이스 관리의 주요 인터페이스는 두 부분으로 나뉘는데 왼쪽은 트리 형식으로 파일 디렉터리를 열거하고 디렉터리의 추가, 삭제와 편집 기능을 실현하려면 오른쪽은 디렉터리의 파일을 미리 보기 형식으로 표시하며 주요 기능은 파일을 업로드하고 삭제하는 것이다.
업로드 파일은 한 번에 여러 개의 파일을 업로드할 수 있는 Swfupload를 사용합니다http://code.google.com/p/swfupload/ 최신 버전의 파일을 다운로드할 수 있으며, 현재 예시는 2.5.0beta 버전을 사용합니다.SWFUpload_ 먼저 다운로드v250_beta_3_samples.zip 이 파일은 압축을 풀면 demos 디렉터리에 있는 swfupload 디렉터리를 해결 방안의 Scripts 디렉터리로 복사합니다.그리고 swfupload를 다운로드하세요.swf.v2.5.0.beta3.2.zip 파일, 이 파일의 파일을 swfupload 디렉터리에 있는 파일로 덮어씁니다.
본론
이제 왼쪽 디렉터리 트리부터 완성하세요.트리를 사용하려면 반드시 Tree Store를 사용해야 하기 때문에 여기에서 시작해야 한다.TreeStore는 모델을 정의할 수도 있고 정의하지 않을 수도 있습니다. 이것은 상황에 따라 다릅니다.현재 상황은, 디렉터리의 추가, 편집, 삭제 작업은 모두 부모 디렉터리와 디렉터리 이름을 제시해야 하며, 디렉터리 이름은 필드text를 사용할 수 있고, 부모 디렉터리는 추가 필드입니다.디렉터리의 조작은 비교적 간단하기 때문에 직접 모델 안에서 완성하면 되기 때문에 모델을 정의하는 것이 비교적 좋은 방법이다.모델의 정의는 하나의 파일로 독립할 수도 있고 initComponet 방법에서 정의할 수도 있다.독립된 파일 정의에 있으면, 확장에 Requires 설정 항목 인용 모델을 추가해야 합니다.다음과 같은 코드로 initComponet 메서드에서 정의됩니다.

        Ext.define("Folder", {
            extend: "Ext.data.Model",
            fields: ["text", "id", "parentId"],
            validations: [{
                type: 'presence',
                field: 'text'
            }],
            proxy: {
                type: 'ajax',
                api: {
                    read: 'Folder/List',
                    create: 'Folder/Add',
                    destroy: 'Folder/Delete',
                    update: 'Folder/Edit'
                },
                reader: {
                    messageProperty: "Msg",
                    type: 'json',
                    root: "data"
                },
                writer: {
                    type: "json",
                    encode: true,
                    root: "data",
                    allowSingle: false
                },
                listeners: {
                    exception: ExtMVCOne.ProxyException
                }
            }
        });

정의에서 parentId는 부모 디렉토리를 기록하는 데 사용됩니다.디렉터리 이름이 비어 있을 수 없는 검증 항목을 추가합니다.프록시 정의에서reader와writer의 정의는 데이터의 입력과 출력을 표준화할 수 있습니다. 이것은 사용자의 정의와 같습니다.프록시의 API는 작업의 제출 경로를 정의합니다.
다음은 TreeStore를 정의합니다. 코드는 다음과 같습니다.

        me.treestore = Ext.create("Ext.data.TreeStore", {
            root: { id: "/", text: " ", expanded: true },
            model: "Folder"
        });

TreeStore의 정의는 모델을 제외하고 중요한 정의 중 하나가 루트 노드입니다.이 루트 노드의 id는 "/"를 사용합니다. 백그라운드에서 가상 경로를 실제 경로로 바꾸는 것을 편리하게 하기 위해서입니다.
다음은 다음과 같은 코드로 트리 패널을 정의합니다.

        me.tree = Ext.widget("treepanel", {
            title: " ", region: "west", collapsible: true, rootVisible: true,
            width: 250, minWidth: 100, maxWidth: 500, split: true, store: me.treestore
        });

테두리 레이아웃을 사용하기 때문에, 테두리 레이아웃의 설정 항목을 혼합해야 합니다.루트 디렉터리를 표시합니다. 루트 디렉터리에 파일을 업로드할 수 있기 때문입니다.
이제 오른쪽 파일 미리보기를 완성합니다.또는 다음 코드를 사용하여 모델에서 시작합니다.

        Ext.define('File', {
            extend: 'Ext.data.Model',
            fields: [
                'filename', 'path',
                "modify",
                { name: "size", type: "int" }
             ]
        });

이 필드는 파일 이름, 경로 외에 자신의 디스플레이 내용에 따라 정의할 수 있습니다.마지막 편집 시간, 파일 크기가 표시됩니다.
다음은 정의된 Store입니다. 코드는 다음과 같습니다.

        me.filestore = Ext.create("Ext.data.Store", {
            batchActions: false,
            remoteFilter: false,
            remoteSort: false,
            pageSize: 50,
            model: "File",
            proxy: {
                type: "ajax",
                api: {
                    read: 'File/List',
                    destroy: 'File/Delete'
                },
                reader: {
                    type: 'json',
                    root: "data"
                },
                writer: {
                    type: "json",
                    encode: true,
                    root: "data",
                    allowSingle: false
                },
                listeners: {
                    exception: SimpleCMS.ProxyException
                }
            }
        });

이 API에create와 update 설정 항목이 없는 이유는 파일은 업로드된 것이기 때문에 이 방식으로 제출할 수 없고, 파일은 일반적으로 업데이트를 하지 않고 먼저 삭제한 후에 업로드하기 때문이다.
다음은 데이터 뷰로 파일을 표시합니다. 코드는 다음과 같습니다.

        me.dataview = Ext.widget("dataview", {
            store: me.filestore, autoScroll: true,
            multiSelect: true, selectedItemCls: "selected", itemSelector: 'div.imageList',
            overItemCls: "overitem", trackOver: true,
            tpl: [
                '<tpl for=".">',
                    '<div class="imageList">',
                        '<img width="160" height="160" src="../Thumbnail{path}{filename}?width=160&height=160" data-qtip=" ：{filename}<br/> ：{modify}<br> ：{size:this.filesize}" /><br/>',
                        '<p class="ellipsis">{filename}</p>',
                    '</div>',
                '</tpl>',
                '<div class="x-clear"></div>',
                {
                    filesize: function (size) {
                        if (size < 1024) {
                            return v + "  ";
                        } else if (size < 1048576) {
                            return (Math.round(((size * 10) / 1024)) / 10) + " KB";
                        } else {
                            return (Math.round(((size * 10) / 1048576)) / 10) + " MB";
                        }
                    }
                }
            ]
        });

데이터 보기를 정의하는 관건은 템플릿의 정의이다. 이것은 책에서 상세한 설명과 예시가 있는데 여기서 상세하게 말하지 않는다.파일 크기의 디스플레이 형식을 변환하기 위해 템플릿에 filesize 방법을 추가했습니다.
보기는 패널이 아니기 때문에 도구막대 구성 요소가 없기 때문에 외부에 패널을 끼워서 도구막대를 배치해야 하기 때문에 보기의 정의에 테두리 레이아웃의 설정 항목이 없습니다.
다음은 전체 인터페이스 프레임워크를 완성합니다. 코드는 다음과 같습니다.

        me.items = [
            me.tree,
            { title: " ", region: "center", layout: 'fit', items: [me.dataview] }
        ];

이제 인터페이스를 조정해서 어떻게 되었는지 볼 수 있다.먼저 메인 패널(mainpanel.js)의 보기 정의로 전환하여 이미지 관리에 레이아웃을 추가하고 레이아웃 형식은 Fit입니다.그리고 메인 패널의 컨트롤러로 전환하여 그림 관리의 activate 방법에서 alert 문장을 삭제하고 다음 코드를 추가합니다.

                        var view = Ext.create('Ext.ux.PicManager', {});
                        var view = Ext.widget("picmanager");
                        panel.add(view);

create 방법의 첫 번째 매개 변수는 문자열이어야 Ext가 클래스 파일을 자동으로 불러올 수 있습니다.widget 방법으로 만들 수도 없습니다. 클래스가 아직 등록되지 않았기 때문에 Ext는 별명이picmanager가 가리키는 클래스가 그 클래스인지 모르고 자동으로 불러오지 않습니다.만약 이런 방식을 사용하지 않는다면, 컨트롤러에requires 설정 항목을 추가하고, 이 종류를 불러올 것을 지정하지만, 이것은 취지와 어긋난다.
디버깅을 편리하게 하기 위해서, 메인 패널 보기 정의에 설정 항목인activeTab을 추가하여, 디버깅할 때마다 탭을 한 번 누르지 않아도 됩니다.그림 관리는 두 번째 탭이기 때문에 현재 인덱스를 1로 설정합니다.
이렇게 해서 페이지가 잠시 불러옵니다.