PDA

View Full Version : validation of a text field



lavap
2 May 2010, 9:51 PM
Hi..

Iam new to this ExtJs...
I have created a text field and a button in the browser.
when i click that button it should open a grid.
But when the text field is empty it should not happen...
plz help me in this..
here is my code..
my HTML



<!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 id="frm">
Search:<input type="text" id="srch"><br><br>
<input type="button" value="search" id="show-grd">
</form>
</body>
</html>



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",
id: 'idg',
totalProperty: "results",
fields:['booktitle','publisher','price']
},RecordDef);
var grid1 = new Ext.grid.GridPanel({
title: 'MyGrid',
closable : true,
id:'gd',
bodyStyle:'color:blue',
store: new Ext.data.Store({
reader: myReader,
url: 'Jsearch.json',
}),

sm: new Ext.grid.RowSelectionModel( {singleSelect: true}),

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
}
});
var store = new Ext.data.SimpleStore({
fields: ['publisher'],
data : exampleData.publisher
});


grid1.store.load();
button.on('click', function(){
if(!win){
win = new Ext.Window({
applyTo:'grd',
width:500,
renderTo:Ext.getBody(),
height:300,
layout:'fit',
allowBlank: false,
closeAction:'hide',
plain: true,
items:[grid1,
],
});
}
win.show(this);
});
});
Ext.ns('exampleData.publisher');
exampleData.publisher=[
['heathrow'],
['cland4'],
['skyring'],
['heathrow'],
['apeldon'],
['streek bus'],
['megawhill'],
['cland4']
];










plz help meeeeeeee :(

Condor
2 May 2010, 10:35 PM
In the button click handler you simply query the srch field, e.g.

var srch = Ext.get('srch').dom.value;
if (srch) {
...
}

ps. You have several errors in your code:
1. Use either fields or RecordDef, but not both.
2. width, height, closeable and animCollapse are not viewConfig options.
3. Use applyTo or renderTo, but not both.
4. Extra comma in window items.

tubamanu
2 May 2010, 10:54 PM
var button = Ext.get('show-grd');

button.on('click', function () {
var txtfield = Ext.get('srch').dom.value;
if(txtfield != '') {
alert('open Grid')
}
else {
alert('do nothing');
}
});

tubamanu
2 May 2010, 10:55 PM
var button = Ext.get('show-grd');

button.on('click', function () {
var txtfield = Ext.get('srch').dom.value;
if(txtfield != '') {
alert('open Grid')
}
else {
alert('do nothing');
}
});

lavap
3 May 2010, 1:10 AM
Hi..
thanks a lot for your rapid reply....
but i have another doubt for the same code.
when i click the button a grid should open.
Now when i click any row in the grid it should open a window with a form (having a button)and the grid data should display in that form
And when I change the data in the form it should update in the grid..can u plz help me in this..
I tried the following code..
its having some errors..
so plz help me in this...
and suggest me what to do...
my JS file is...





Ext.onReady(function(){
var win;
var button = Ext.get('show-grd');
var myReader = new Ext.data.JsonReader({
autoScroll: true,
root: "rows",
id: 'idg',
totalProperty: "results",
fields:['booktitle','publisher','price']
} );

var grid1 = new Ext.grid.GridPanel({
title: 'MyGrid',
closable : true,
id:'gd',
bodyStyle:'color:blue',
store: new Ext.data.Store({
reader: myReader,
url: 'Jsearch.json',
}),

sm: new Ext.grid.RowSelectionModel( {singleSelect: true}),
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,
loadMask:true
}
});
var store = new Ext.data.SimpleStore({
fields: ['publisher'],
data : exampleData.publisher
});
var combo = new Ext.form.ComboBox({
store: store,
displayField:'publisher',
typeAhead: true,
mode: 'local',
fieldLabel:'Publisher Name',
triggerAction: 'all',
emptyText:'Select publisher Name...',
selectOnFocus:true,
labelSeparator: ' '
});
var myFormPanel = new Ext.form.FormPanel({
id:'grdform',
bodyStyle:'padding:10px 0 35px 10px;',
items: [{
xtype: 'textfield',
fieldLabel: 'BookTitle'
},
combo
,{
xtype: 'textfield',
fieldLabel: 'Price'
},
{
buttons: [{
text:'update',
},{
text:'close',
handler: function(){
win.close()
}
}]},
{
xtype:'grid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm,row,rec) {
Ext.getCmp("grdform").getForm().loadRecord(rec);
}
}
}),
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
},
],
});
grid1.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
win = new Ext.Window({
width:300,
title:'update Book Detail',
height:200,
closable: true,
items:[
myFormPanel,
]
})
win.show(this);
});
grid1.store.load();
button.on('click', function(){
var srch = Ext.get('srch').dom.value;
if (srch) {

if (!win) {
win = new Ext.Window({
width: 500,
height: 300,
layout: 'fit',
allowBlank: false,
closeAction: 'hide',
plain: true,
items: [grid1,],
});
}
};
win.show(this);
});
});
Ext.ns('exampleData.publisher');
exampleData.publisher=[
['heathrow'],
['cland4'],
['skyring'],
['heathrow'],
['apeldon'],
['streek bus'],
['megawhill'],
['cland4']
];

Condor
3 May 2010, 2:02 AM
You need to call:

Ext.getCmp("grdform").getForm().loadRecord(rec);
after you show the window with the form.

ps. I would recommend using the grid 'rowdblclick' instead of the selectionmodel 'rowselect' event.

lavap
3 May 2010, 2:11 AM
Hey really thanks a lot for your kind reply...
but I dont know how to use
"rowdblclick"

Can you please modify my code and send it to me...

Condor
3 May 2010, 3:15 AM
Something like:

Ext.onReady(function () {
var grid1 = new Ext.grid.GridPanel({
title: 'MyGrid',
closable: true,
id: 'gd',
bodyStyle: 'color:blue',
store: new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'idg',
totalProperty: 'results',
fields: ['booktitle', 'publisher', 'price']
}),
url: 'Jsearch.json'
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
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,
loadMask: true
}
});
var combo = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['publisher'],
data: exampleData.publisher
}),
displayField: 'publisher',
typeAhead: true,
mode: 'local',
fieldLabel: 'Publisher Name',
triggerAction: 'all',
emptyText: 'Select publisher Name...',
selectOnFocus: true,
labelSeparator: ' '
});
var myFormWin;
var myFormPanel = new Ext.form.FormPanel({
id: 'grdform',
bodyStyle: 'padding:10px 0 35px 10px;',
items: [{
xtype: 'textfield',
fieldLabel: 'BookTitle'
},
combo, {
xtype: 'textfield',
fieldLabel: 'Price'
},
{
buttons: [{
text: 'update'
},
{
text: 'close',
handler: function () {
myFormWin.close();
}
}]
}]
});
grid1.on('rowdblclick', function (grid, rowIndex, e) {
if(!myFormWin){
myFormWin = new Ext.Window({
width: 300,
title: 'update Book Detail',
height: 200,
closable: true,
items: [myFormPanel]
});
}
myFormWin.show();
var rec = grid.getStore().getAt(rowIndex);
myFormPanel.getForm().loadRecord(rec);
});
grid1.store.load();
var win;
Ext.get('show-grd').on('click', function () {
var srch = Ext.get('srch').dom.value;
if (srch) {
if (!win) {
win = new Ext.Window({
width: 500,
height: 300,
layout: 'fit',
allowBlank: false,
closeAction: 'hide',
plain: true,
items: [grid1]
});
}
}
win.show();
});
});
Ext.ns('exampleData');
exampleData.publisher = [
['heathrow'],
['cland4'],
['skyring'],
['heathrow'],
['apeldon'],
['streek bus'],
['megawhill'],
['cland4']
];
(warning: completely untested)

lavap
3 May 2010, 8:27 PM
Hi..
fine its working..
when i clicked any row in the grid it is opening a window form..
but it is not displaying the data of the grid...
it should display the grid data in the form...
and when I change the data in the form and click the button in the form it should automatically update the same in the grid..

plz help me....:(

Condor
3 May 2010, 10:33 PM
1. The TextFields and ComboBoxes still need a 'name' or 'hiddenName' that matches the name of the field in the record.
2. To update the record you would need to store the current record in the form and call updateRecord(rec) in the button handler.

lavap
3 May 2010, 10:38 PM
1. The TextFields and ComboBoxes still need a 'name' or 'hiddenName' that matches the name of the field in the record.
2. To update the record you would need to store the current record in the form and call updateRecord(rec) in the button handler.



Hi condor....

How I can implement these things..
Bcoz am new to this extjs...
can u send me a sample code..it will helpful to me...

Condor
3 May 2010, 10:48 PM
var combo = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['publisher'],
data: exampleData.publisher
}),
displayField: 'publisher',
typeAhead: true,
mode: 'local',
fieldLabel: 'Publisher Name',
triggerAction: 'all',
emptyText: 'Select publisher Name...',
selectOnFocus: true,
labelSeparator: ' ',
name: 'publisher'
});
var myFormPanel = new Ext.form.FormPanel({
id: 'grdform',
bodyStyle: 'padding:10px 0 35px 10px;',
items: [{
xtype: 'textfield',
fieldLabel: 'BookTitle',
name: 'booktitle'
},
combo, {
xtype: 'textfield',
fieldLabel: 'Price',
name: 'price'
},
{
buttons: [{
text: 'update',
handler: function () {
myFormPanel.getForm().updateRecord(myFormPanel.rec);
myFormWin.hide();
}
},
{
text: 'close',
handler: function () {
myFormWin.hide();
}
}]
}]
});
grid1.on('rowdblclick', function (grid, rowIndex, e) {
if(!myFormWin){
myFormWin = new Ext.Window({
width: 300,
title: 'update Book Detail',
height: 200,
closable: true,
items: [myFormPanel]
});
}
myFormWin.show();
var rec = grid.getStore().getAt(rowIndex);
myFormPanel.rec = rec;
myFormPanel.getForm().loadRecord(rec);
});
(as always: completely untested code)

lavap
3 May 2010, 10:57 PM
Hi..

Its amazing....
it is displaying the data of the grid in the form...
but:( not updating...

Condor
3 May 2010, 11:55 PM
I fixed some errors in the example above.