ExtJs 컨트롤러에서 html 폼의 값 전달하기

저는 ExtJS에 익숙하고 어떻게 작동하는지 배우고 있습니다 .. 제 경우에는 제 인덱스 페이지에서 아약스를 통해로드하는 HTML 페이지가 있습니다. 양식 요소입니다. 지금까지는 이벤트 리스너를 내 양식의 단추로 설정 했으므로 단추를 클릭하면 이벤트가 완벽하게 작동합니다. 확실하지 않은 것은 폼의 필드 값을 컨트롤러에서 처리하는 방법을 전달하는 것입니다. 여기 ExtJs 컨트롤러에서 html 폼의 값 전달하기

은 예제 코드입니다 :

형태 :

<form id="loginform"> 
     <fieldset> 
      <input type="text" id="usn" placeholder="User" /><br /> 
      <input type="password" id="pwd" placeholder="Password"/> 
     </fieldset> 
     <p><input type="button" id="lg" value="Enter" /></p> 
    </form>

내보기 :

Ext.define('App.view.Login', { 
extend: 'Ext.container.Container', 
alias: 'widget.login', 

renderTo: 'wrap', 

initComponent: function() { 


    this.items = [{ 
     loader: { 
      autoLoad: true, 
      url: "web/login.html", 
      renderer: function(loader, response, active) { 
       var res = response.responseText; 
       loader.getTarget().update(res); 
      } 
     }  
    }]; 


    this.addEvents('loginUser'); 



    this.callParent(arguments); 
}, 


afterRender: function() { 
    this.mon(this.el, 'click', this.onUserClick, this, { 
     delegate: '#lg' 
    }); 

    this.callParent(arguments); 
}, 


onUserClick: function(ev, t) { 
    ev.stopEvent(); 

    var params = Ext.fly(t).getAttribute('value'); 

    this.fireEvent('loginUser', params, this, ev); 
}

});

cotroller :

Ext.define('App.controller.Login', { 
extend: 'Ext.app.Controller', 

views: [ 'Login' ], 

refs: [{ 
    selector: 'login', 
    ref: 'login' 
}], 

init: function() { 

    this.control({ 

     'login':{ 

      loginUser: this.onLoginAuth 

     } 
    }); 
}, 

onLoginAuth: function(params, component, event){ 





    Ext.widget('users'); 


    this.getLogin().destroy(); 

}

});

누군가 구현할 수있는 아이디어가 있습니까?

출처

2012-06-22 Tass

왜 당신이 할 것을 그것은 좋아하고, 사용하지 말고, Ext 양식을 말하는가? 고마워 –

나는 당신이 extjs를 오해하고 있다고 생각합니다. 주로 브라우저 호환성을 위해 extjs를 사용하고 있습니다. 우리는 직접 HTML을 쓰지 않고 extjs는 우리를 위해 그것을합니다.

는 HTML 측에서, 우리는 단지 extjs라는 라이브러리를 포함하고 Application 클래스의 인스턴스로 시작 app.js

모든 내선 JS 4 응용 프로그램에서

<html> 
    <head> 
<title>Account Manager</title> 

<link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css"> 

<script type="text/javascript" src="ext-4/ext-debug.js"></script> 

<script type="text/javascript" src="app.js"></script> 
</head> 
<body></body> 
</html>

을 app.js. 응용 프로그램에는 응용 프로그램의 전역 설정 (예 : 응용 프로그램 이름)이 포함되어 있으며 응용 프로그램에서 사용되는 모든 모델,보기 및 컨트롤러에 대한 참조가 유지됩니다. 응용 프로그램에는 모든 기능이로드 될 때 자동으로 실행되는 실행 기능도 포함되어 있습니다.

체크 http://docs.sencha.com/ext-js/4-1/#/guide/application_architecture

출처

2012-06-25 05:47:32 Jom

다른 포스터 말했듯이, 당신이 그런 식으로해야하지만 경우, 훨씬에게 Ext.form 클래스를 사용하는 것이 더 의미가 있습니다 :

this.fireEvent('loginUser', this, Ext.getDom('usn').value, Ext.getDom('pwd').value);

출처

2012-06-25 06:25:05

ExtJs 컨트롤러에서 html 폼의 값 전달하기

답변

관련 문제