PDA

View Full Version : textfield and button validation



lavap
22 Apr 2010, 3:06 AM
Hi..

I created a text field and a button.
when i click the button it wil open a grid.

But i need a validation for the textfield...If click the button when the text fied is empty it should open the grid..
Can anyone help me in this...
plz send me the modified code..

here is my code
my JS file:





Ext.onReady(function(){

var win;

var button = Ext.get('show-grd');


var RecordDef = Ext.data.Record.create([

{name: 'BookTitle'},
{name: 'publisher'} ,

{name: 'price'}

]);

var myReader = new Ext.data.JsonReader({

autoScroll: true,

root: "rows",

totalProperty: "results",

fields:['BookTitle','publisher','price']

},RecordDef);

var grid1 = new Ext.grid.GridPanel({

title: 'MyGrid',

closable : true,
bodyStyle:'color:red',

store: new Ext.data.Store({

reader: myReader,

url: 'Jsearch.json',

}),

cm: new Ext.grid.ColumnModel([

{id:'BookTitle',header:"BookTitle", width: 40, sortable: true, dataIndex: 'BookTitle'},

{header: "publisher", width: 20, sortable: true, dataIndex: 'publisher'},

{header: "price", width: 20, sortable: true, dataIndex: 'price'}

]),

viewConfig: {

forceFit: true,

width: 600,

height: 300,

closable : true,

animCollapse: false,

loadMask:true
}

});

grid1.store.load();

button.on('click', function(){

if(!win){

win = new Ext.Window({

applyTo:'grd',

layout:'fit',

width:500,

height:300,

closeAction:'hide',

plain: true,

items:[grid1],

});

}

win.show(this);

});
});




And my html File






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<script type="text/javascript" src="search.js"></script>

<script type="text/javascript">



</script>

<title>search Option</title>

</head>

<body>

<form>

Search: <input type="text" id="srch"><br><br>

<input type="button" value="search" id="show-grd">


</form>

<div id="grd" class="x-hidden">

<div id="data"></div>

</div>

</body>
</html>







what modifications I have to do...
plz send me the modified code...

Thanks for your help in advance