>웹 프론트엔드 >JS 튜토리얼 >Extjs 목록 세부 정보 창을 생성한 후 자동으로 로드하는 솔루션_extjs

Extjs 목록 세부 정보 창을 생성한 후 자동으로 로드하는 솔루션_extjs

WBOY
WBOY원래의
2016-05-16 18:30:351069검색

Extjs에서는 현재 페이지의 그리드 페이지에 새로운 데이터 행을 생성한 후, 폼을 통해 상세페이지 편집을 입력했는데, 이때 해당 페이지가 편집을 위해 자동으로 상세페이지가 열리도록 하기 위해, 3시간을 투자하여 마침내 Extjs에서 가장 적합한 솔루션을 찾았지만 결과는 단 세 문장뿐인 것 같습니다. 많은 Extjs 매니아들이 알고 싶어하거나 이미 알고 있는 내용이 아닐까 싶습니다. 당신은 extjs 커뮤니티에 내 자신의 아이디어 중 일부를 기여하기 위한 것입니다.

목록이 생성된 후 일반적으로 프롬프트가 표시됩니다. 이제 처음 몇 가지 아이디어를 알려드리겠습니다. 결과를 직접 보고 싶으시면 마지막 계획 세트로 건너뛰셔도 됩니다~

옵션 1(폐기). 새 데이터를 생성한 후 createform 메소드에 id 값을 보냅니다. 이는 일반 웹 개발자가 생각하는 첫 번째 방법으로, 상세 페이지에 매개변수를 전달한 후, 상세 페이지에서 ID를 기준으로 해당 데이터를 라이브러리에서 검색하여 페이지에 표시하는 방식일 것입니다. 그러나 조사 결과 현재 페이지의 하위 창을 통해 페이지가 표시되고 두 번째 페이지를 표시하려는 경우 하위 창의 데이터가 그리드의 각 데이터 행을 통해 전달되는 것으로 나타났습니다. -레벨 페이지에서는 먼저 그리드에 표시해야 합니다. 데이터를 읽으려면 전체 값을 레코드로 전달해야 합니다. 데이터를 추가한 후 목록 자체를 업데이트해야 합니다. 목록에 있는 최신 데이터를 직접 읽어서 직접 전달하는 것이 좋습니다. 그러면 두 번째 계획이 나옵니다~

계획 2(성공) ) 데이터가 생성되고 목록이 업데이트된 후 목록의 첫 번째 항목(생성 시간에 따라 정렬되므로)을 선택한 상태로 설정하고 첫 번째 항목을 클릭하는 것과 동일한 onEdit 메서드를 호출합니다. 그리드에 있는 데이터 행을 클릭하고 편집 버튼을 클릭합니다. 효과(ps: 제가 재능이 있나요?) 좋아, 데이터 저장 메소드 이후에 Grid.selModel.selectRow(0)를 호출한 다음, Grid.onEdit()(자신이 정의한 편집 메소드, Grid.getSelectionModel().getSelected()를 통해 선택한 행을 꺼내고 통과) 매개변수를 양식에 적용), 여기에서 직접 선택하면 선택한 목록이 업데이트되기 전의 첫 번째 항목이 됩니다(우리가 원하는 업데이트 후 첫 번째 항목이 아님)~~ 스토어의 로드가 로드되기 때문에 주의하세요 비동기적으로, 하하, 여기서는 이 두 가지 메소드를 다음과 같이 setTimeout 함수에 넣어야 합니다:

코드 복사 코드

setTimeout(function(){
Ext.getCmp("gridPanel").sm.selectRow(0);
Ext.getCmp("gridPanel"). onEdit() ;
},300);

지연을 설정한 다음 선택 및 편집 방법을 실행하세요. 내가 this.grid 대신 getCmp를 사용하고 있다는 것을 눈치채셨나요? js의 setTimeout 범위는 전역이므로 여기에서 지역 변수를 사용하면 js는 "정의되지 않은 개체 또는 메서드"라는 오류를 보고합니다. 그런데 사용하면서 또 다른 문제점을 발견했습니다. 딜레이 시간이 좀 길게 느껴지고, 딜레이가 있으면 사람들이 늘 불편함을 느꼈던 것이 이 기능을 사용하지 않고도 가능할까요? 그 이후로 궁극적인 계획이 곧 공개될 예정입니다! 열심히 노력해서 찾아낸 방법인데 헤헤 좀 기회주의적인 것 같군요. 웃지 마세요~
저도 얼마전에 Extjs를 배운 초보입니다. js에 익숙하지 않은 분들은 이런 작은 문제들이 사소하고 심각하게 받아들여지지 않는 것 같은데, 전문가들은 그냥 건너뛰고 제 말을 듣지 않습니다. 하하~
옵션 3(최고) Extjs 메시지 창의 콜백 함수에서 목록을 선택하고 세부정보를 엽니다. 이것이 나의 최선의 해결책입니다. Ext가 Ext.Msg.alert() 메소드에 대해 4개의 매개변수, 즉 title, msg, fn, 범위를 제공한다는 것을 알았기 때문입니다(참고 블로그 게시물 참조). 그 중 fn은 콜백 함수 블록의 내용입니다. 버튼을 클릭한 후 콜백 함수에 위의 두 줄의 코드를 삽입하여 지연된 로딩과 사용자 경험의 두 가지 주요 문제를 해결했습니다. 왜 안 될까요?
코드 복사 코드는 다음과 같습니다.

Ext.Msg.alert("프롬프트 메시지 ", " 성공적으로 생성되었습니다. 자세한 정보를 입력해 주세요!", function() {
this.grid.sm.selectRow(0);
this.grid.onEdit();
}, this);

이 코드는 몇 줄 안 되는 것 같지만, 이 해결책을 찾기 위해 수십 번 시도하고 디버깅했습니다. 유용하니 좋아요 잊지 마세요~
문제 해결 과정에서 다음 블로그 글을 참고했습니다.
ExtJS Ext.MessageBox.alert() 팝업 대화 상자 상세 설명
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.