Ext JS 고급 프로그래밍 섹션: DataWrite와 RowEditor를 결합한 Grid 예제 (1)
먼저 "grid.html"페이지 파일을 만들고 필요한 Ext 파일을 파일에 포함하고 RowEditor의 스타일 파일과 스크립트 파일을 포함해야 합니다.
이어서 onReady에서 QuickTips를 초기화합니다. 코드는 다음과 같습니다.
- Ext.QuickTips.init();
- RowEditor ， 。
- HttpProxy ， 。
- var proxy = new Ext.data.HttpProxy({
- api: {
- read : 'grid.ashx?act=list',
- create : 'grid.ashx?act=create',
- update: 'grid.ashx?act=update',
- destroy: 'grid.ashx?act=del'
- }
- });
HttpProxy의 정의에서 목록, 추가, 편집, 삭제된 제출 주소는 모두'gird.ashx'입니다.act 매개 변수를 통해 이 네 가지 동작을 구분합니다.
다음 코드와 같이 JsonReader를 정의합니다.
- var reader = new Ext.data.JsonReader({
- totalProperty: 'total',
- successProperty: 'success',
- idProperty:"id",
- root: 'rows'
- }, [
- {name: 'id'},
- {name: 'cid',allowBlank: false},
- {name: 'title', allowBlank: false},
- {name: 'desc'}
- ]);
정의에서 id 필드는cid 필드와 같습니다. 정의를 분리하는 이유는 T_Categories표의 id는 수동으로 입력한 것이지 자동으로 생성된 것이 아니다. 스토어가 기록 제출 데이터를 추가할 때 그림8-21에서 보듯이 id 필드 제출은 스토어에서 자동으로 생성된 id이고 사용자가 입력한 id가 아니기 때문에 백그라운드에서 이 데이터를 처리할 수 없다.그래서 여기에서 두 개의 필드를 사용했지만, 이것은 또 다른 문제가 발생할 수 있으며, 이것은 뒤에서 이야기할 것이다.만약 id가 자동으로 생성된다면, 이렇게 처리하지 않고 바로 id를 하나 만들면 됩니다.
다음 코드와 같이 JsonWriter를 정의합니다.
- var writer = new Ext.data.JsonWriter({
- encode: true,
- writeAllFields: true
- });
위 코드에서 매개 변수 encode는true로 설정되면 제출한 데이터는 그림8-21과 같은 형식이고 모든 데이터는 JSON 형식으로 인코딩되어rows 매개 변수로 서버에 제출됩니다."rows"매개 변수는 JsonReader 정의의 매개 변수 루트의 정의 값입니다. 예를 들어 JsonReader의 정의에서 루트의 값은'data'이고 그림8-21에서 제출한 데이터는'data {...}'이지'rows {...}'가 아닙니다.
encode가false로 설정되면 제출된 데이터 형식은 그림8-22와 같습니다. 이것은 제출된 매개 변수의 이름이 없고, "rows"도 JsonReader가 정의한 루트의 값입니다.
매개 변수 writeAllFields의 역할은 제출할 때true로 설정하면 모든 필드를 제출하고false이면 수정된 필드만 제출합니다.
다음은 다음과 같은 코드로 Store를 정의합니다.
- var store = new Ext.data.Store({
- proxy: proxy,
- reader: reader,
- writer: writer,
- autoSave: true,
- autoLoad:true,
- listeners: {
- write : function(store, action, result, res, rs) {
- if(action==Ext.data.Api.actions.destroy){
- Ext.Msg.alert(" ",res["msg"]);
- }
- },
- exception : function(proxy, type, action, options, res, arg) {
- if (type === 'remote') {
- Ext.Msg.show({
- title: ' ',
- msg: res.message,
- icon: Ext.MessageBox.ERROR,
- buttons: Ext.Msg.OK
- });
- }else{
- if(action==Ext.data.Api.actions.create){
- var row = Ext.decode(options.params["rows"]);
- if(row["id"]){
- rec=store.getById(row["id"]);
- if(rec) store.remove(rec);
- }
- }
- var o= Ext.decode(res.responseText);
- if(o["msg"]){
- Ext.Msg.alert(" ",o["msg"]);
- }
- }
- }
- }
- });
정의에서proxy,reader,writer는 모두 이전에 정의된 것입니다.매개 변수 autoSave의 역할은 데이터가 바뀔 때 자동으로 데이터를 제출하는 것이다. 매개 변수 autoLoad는 자동으로 데이터를 불러오는 것을 표시하고 그 중에서 write 이벤트와 exception 이벤트를 감청했다.write 이벤트는 데이터 제출이 성공한 후에 터치하고, exception 이벤트는 데이터 제출이 실패한 후에 터치합니다.write 이벤트에서 데이터를 삭제하는 데 성공하면 서버에서 되돌아오는 알림 메시지가 표시됩니다.exception 이벤트에서 서버 사이드 파일의 실행에 오류가 있으면 오류 정보를 알려 줍니다.그렇지 않으면 새 레코드를 만들 때 오류가 발생했는지 판단하고, 그렇지 않으면 스토어에서 새로 추가된 레코드를 삭제하고 서버에서 되돌아오는 오류 정보를 표시합니다.
다음 코드를 사용하여 RowEditor를 정의합니다.
- var editor = new Ext.ux.grid.RowEditor({
- saveText: ' ',
- cancelText:' ',
- listeners:{
- beforeedit:function(rowedit,index){
- // update id
- var rec=store.getAt(index);
- if(rec.data.cid){
- ideditor.disable();
- }else{
- ideditor.enable();
- }
- }
- }
- });
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Rails】자신의 활동 일람을 표시한다【통지 기능의 응용】안녕하세요! 고양이 조카 ( )라고합니다. 요 전날, 처음부터 독학으로 공부하고, 웹 서비스 「 」를 시작했습니다. 이 서비스는 다음과 같은 알림 기능을 구현합니다. 이 기능을 응용하여 자신이 「좋아요, 코멘트, 팔...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
