PDA

View Full Version : Adding image in sencha in a panel



NehaShah
13 Jun 2011, 1:28 AM
HI all,
Can anyone tel me hw to add image in sencha ..apart from custom icons

jmclem
13 Jun 2011, 6:01 AM
Hi,

I would put an <img> tag in the 'html' of a panel; something like:


Ext.extend(Ext.Panel, {
html: "<img src=\"...\" alt=... />"
});

or, if through config


items: [{
xtype: "panel",
html: "<img ..."
}]


Jean-Marie.

NehaShah
13 Jun 2011, 8:39 PM
Thankyou for ans it workss ..yepeee.
Can u tel me how shld a form data be submited and json part ...m bit confused:)

NehaShah
14 Jun 2011, 3:11 AM
Hi ,
I want to login on click of submit button there is a validation page were i want to get data username and get used for validation but normal jsp not working.Below is ma code.I m confused on sucess failur part to use ..plzz help
login.js
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=device-scale, user-scalable=yes, minimum-scale=1.0, maximum-scale=5.0" />

<!-- sencha touch css -->
<link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch.css" />

<!-- <link rel="stylesheet" type="text/css" href="sencha-touch/docs/resources/css/ext-all.css">
<script type="text/javascript" src="sencha-touch/docs/resources/ext-base.js"></script>
<script type="text/javascript" src="sencha-touch/docs/resources/ext-all.js"></script>-->
<script type="text/javascript" src="sencha-touch/sencha-touch.js"></script>


<script type="text/javascript">

Ext.onReady(function(){

var login = new Ext.form.FormPanel({
width:400,
autoHeight:true,
labelWidth:80,

frame:false,
text:'Please Login',
renderTo: Ext.getBody(),
items:[{
xtype: 'textfield',
name : 'loginUsername',
label: 'Username',
allowBlank:false
},{
xtype: 'textfield',
label:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
},
{
xtype: 'button',
text: 'Login',
ui: 'action',
formBind: true,
minWidth: '35',

handler:function(){
Ext.Ajax.request({
url : 'Login.jsp' ,
method: 'POST',
success: function ( result, request ) {
console.info("Success: " + result.responseText);
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'test.jsp';
window.location = redirect;
}
});



},
failure: function ( result, request) {
console.info("Failure: " + result.responseText);
Ext.Msg.alert('Uuops..', result.message);
}
});
}



}]

});


});
</script>
</head>
<body >

</body>
</html>

and my login.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String result;
String loginUsername = request.getParameter("loginUsername");
if (null != loginUsername && loginUsername.length() > 0) {
if (loginUsername.equals("neha"))
result = "{success:true}";
else
result = "{failure:true,errors:{reason:'Login failed.Try again'}}";

} else {
result = "{failure:true,errors:{reason:'No userid has been provided'}}";
}
%>
Value<%=loginUsername%>

bclinton
14 Jun 2011, 3:28 AM
Please allow me to suggest a few things:
* Wrap your code in code tags.
* start a new thread if you're asking a completely different question
* paste the output from your .jsp

I haven't used .jsp in a while, but it looks a lot like your .jsp is returning Value<%=loginUsername%> rather than {success:true}

NehaShah
14 Jun 2011, 4:33 AM
Thanks ,as i didnt knew abt code tags.and
for my jsp i is returning nulll value on my console:)

okta_vianty
2 Feb 2012, 7:04 PM
Thank you for the information. I really helped.
Now can you tell me How can I set the image size to match with the size of the existing panel?

nish1013
11 Apr 2012, 4:40 AM
Hi,

I would put an <img> tag in the 'html' of a panel; something like:


Ext.extend(Ext.Panel, {
html: "<img src=\"...\" alt=... />"
});

or, if through config


items: [{
xtype: "panel",
html: "<img ..."
}]


Jean-Marie.


Cheers Jean , it helped me too, much appreciated!