PDA

View Full Version : ExtJS Help



lukefowell89
3 Nov 2010, 8:04 AM
Hi,

I have recently started learning to use ExtJS for an upcoming project that I need to use it for, but I am having trouble really grasping it. I have gone through the tutorials and know the basic syntax etc and roughly what I need to do to achieve what I want. The problem is though, anything that isnt detailed directly in the API or demo's I cant get working!

As an example that I am trying to learn how to do, is create a window with a button to add a new record to a mySQL database, this is then updated in the grid below. I want to have 4 different tabs for on this window, to be able to add data in 3 different areas and then a 4th which I want to use to be able to show search results.

At the moment, I am finding that everytime I try to achieve something, an error occurs which I cannot get to the bottom of, or for example when I put a popup form in a window, the textfields dont work?

Could I get some advice about how to proceed with this, I am not asking for all the code as I want to learn myself, but some helpful pointers and suggestions, with a couple of code snippets would be amazing!

Thanks

Condor
3 Nov 2010, 8:19 AM
These are all seperate problems, each without enough information to help you properly.

Could you provide more detail (and perhaps post some code)?

lukefowell89
3 Nov 2010, 8:32 AM
Well for starters, how can I place a grid within the first 3 of my tabs from my tab menu? contentEl? I find the API hard to follow when looking for certain methods

Condor
3 Nov 2010, 8:35 AM
No, contentEl is only used when using Ext in existing HTML pages.

You should just specify the grid as one of the tabpanel items, or if you need to do it programmatically, add() it to the tabpanel and call tabpanel.doLayout().

lukefowell89
3 Nov 2010, 9:05 AM
Hi Again,

I have put together some code to the best of my ability, I am bound to of missed something out and done thigns wrong, please could you point out my mistakes?


Ext.onReady(function(){

var tabMenu = new Ext.TabPanel({
activeTab: 0,
renderTo: Ext.getBody(),
width: Ext.getBody().getWidth(),
height: Ext.getBody().getHeight(),
defaults: {autoScroll: true},
plain: true,
id: 'tabMenu',
items: [{
title: 'Dorset Team',
id: 'dorsetteam'
},{
title: 'South-West Team'
},{
title: '5-a-side Team'
},{
title: 'Search Player'
}]
});

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'rows',
totalProperty: 'totalResults',
id: 'id'
},[
{name: 'id'},
{name: 'firstname', mapping: 'firstname'},
{name: 'lastname', mapping: 'lastname'},
{name: 'position', mapping: 'position'}
]);

var dorsetStore = new Ext.data.Store({
proxy: proxy,
baseParams: {side: 'dorset'},
reader: playerReader,
sortInfo:{field: 'name', direction: 'ASC'}
});

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 100
},{
header: 'First Name',
dataIndex: 'firstname',
width: 150
},{
header: 'Last Name',
dataIndex: 'lastname',
width: 150
},{
header: 'Position',
dataIndex: 'position',
width: 150
}
]
);

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
width: 'auto',
height: 'auto'
});





tabMenu.add('dorsetGrid');
tabMenu.doLayout();


});





Thanks

Edit: Ammended code slightly!

Foster
3 Nov 2010, 10:09 AM
Hello Luke,

I do think you can use the tab panel like you have done, but it practice the way I have always done it was to use some other container ( like the viewport, another panel, etc) and then put my objects inside of that. It seems like what you are doing with the width and height is trying to maximize the panel to your window size but I dont think that will work properly

For example you could use a panel with layout:fit and then but the dorset grid inside of there, and it will work even when you resize the browser window

I would recommend looking into the examples under layouts and views that came with the ExtJS download and try out the border layout and some of the others to play around with it

-Foster

Condor
3 Nov 2010, 11:23 AM
No quotes:

tabMenu.add(dorsetGrid);

Also, no width:'auto' or height:'auto' on the grid. The tabpanel will take care of that (the tabpanel will need height and width or be included in an Ext.Viewport).

And the grid will need a title (used as the tab name).

lukefowell89
4 Nov 2010, 1:33 AM
Thanks for all your help! I have it alot more working now that before, the only problem now is that the data is not coming through!

I have set it all up and mapped the field names etc. I will post my new code as well as my table structure!

Ext Code:


Ext.onReady(function(){

var tabMenu = new Ext.TabPanel({
renderTo: Ext.getBody(),
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
id: 'tabMenu'
});

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

var dorsetStore = new Ext.data.Store({
proxy: proxy,
baseParams: {side: 'dorset'},
reader: playerReader,
sortInfo:{field: 'name', direction: 'ASC'}
});

var soutwestStore = new Ext.data.Store({
proxy: proxy,
baseParams: {side: 'southwest'},
reader: playerReader,
sortInfo: {field: 'name', direction: 'ASC'}
});

var fiveStore = new Ext.data.Store({
proxy: proxy,
baseParams: {side: 'five'},
reader: playerReader,
sortInfo: {field: 'name', direction: 'ASC'}
});

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 100
},{
header: 'Name',
dataIndex: 'name',
width: 150
},{
header: 'Position',
dataIndex: 'position',
width: 150
}
]
);

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,

height: 300,
title: 'Dorset Team',
id: 'dorsetGrid'
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'South-West Team',
height: 300,
id: 'southwestGrid'
});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: '5-a-side Team',
height: 300,
id: 'fiveGrid'
})


tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.doLayout();

});



PHP Code:


<?php
include('database.php');
function getFive()
{
$query = mysql_query('SELECT * FROM players WHERE team = 2');
while($row = mysql_fetch_array($query)) {
$arr[] = $row;
}
$data = json_encode($arr);
echo '({"total":"'.$number.'","results":'.$data.'})';
}

function getDorset()
{
$query = mysql_query('SELECT * FROM players WHERE team = 1');
while($row = mysql_fetch_array($query)) {
$arr[] = $row;
}
$data = json_encode($arr);
echo '({"total":"'.$number.'","results":'.$data.'})';
}

function getSouthWest()
{
$query = mysql_query('SELECT * FROM players WHERE team = 0');
while($row = mysql_fetch_array($query)) {
$arr[] = $row;
}
$data = json_encode($arr);
echo '({"total":"'.$number.'","results":'.$data.'})';
}

if($_POST['side'])
{
switch($_POST['side'])
{
case 'five':
getFive();
break;
case 'dorset':
getDorset();
break;
case 'southwest':
getSouthWest();
break;
}
}

?


and my database is made up on 4 fields with the table names of: -

id (int 5)
name (varchar 100)
position (varchar 100)
team (int 1)

Anyone got any idea why it isnt working?

Thanks

Condor
4 Nov 2010, 1:36 AM
Can't read PHP. Can you post what your PHP script actually generates (copy from Firebug Net tab)?

lukefowell89
4 Nov 2010, 1:40 AM
I cant see that is generating anything from firebug, but there again I may be looking in the wrong place?

Condor
4 Nov 2010, 1:42 AM
You are not actually loading the stores (call store.load() or configure the store with autoLoad:true).

lukefowell89
4 Nov 2010, 1:46 AM
Ok I tested in the PHP itself to see its response to my query and I get,



({"total":"","results":[{"0":"1","id":"1","1":"Luke Fowell","name":"Luke Fowell","2":"Forward","position":"Forward","3":"0","team":"0"}]})
which looks to me to be exactly what I wanted.

Any ideas? not getting to the Ext? not being called? set up proxy incorrectly, or the reader?

Edit: Sorry I was abit slow!

Condor
4 Nov 2010, 1:52 AM
The data isn't correct. It should have been:

{
"total": 1,
"results": [{
"id": "1",
"firstname": "Luke",
"lastname": "Fowell",
"position": "Forward",
"team": "0"
}]
}

Also, the reader isn't correct:

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
},[
{name: 'id'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'position'},
{name: 'team'}
]);

steffenk
4 Nov 2010, 1:56 AM
reason is wrong php, correct would be

function getFive() {
$query = mysql_query('SELECT * FROM players WHERE team = 2');
while($row = mysql_fetch_array($query)) {
$arr[] = $row;
}
$data = array(
'total' => count($arr),
'results' => $arr
);
echo json_encode($data);
}

never ever make json manually.

lukefowell89
4 Nov 2010, 2:22 AM
Actually it works fine now! I ammended Condor's suggestion to load the ds which I had forgotten to do and it all shows up perfect!

I have now moved onto adding a paging toolbar at the bottom, which I have got to show up, but not to function correctly, I have looked at some tutorials and checked the API but I dont quite know what I am supposed to do!


var paging = new Ext.PagingToolbar({
pageSize: 10,
displayInfo: true,
displayMsg: 'total {2} results found. Current shows {0} - {1}',
emptyMsg: "not result to display"
});

var tabMenu = new Ext.TabPanel( {
renderTo: Ext.getBody(),
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
id: 'tabMenu',
bbar: [paging]
});


I guess I need to let the paging toolbar know which datastore to check? but the problem is there are 3 different datastores for each of the tabs, so how do I change it depending on what tab I am on?

Also does the data all get loaded and then Ext controls how much is shown? or does it have to be a SQL Limit?

Condor
4 Nov 2010, 2:34 AM
1. A PagingToolbar needs a store, so I suggest you create one for each store and add it as a bbar to the grids intead of to the tabpanel.

2. Use bbar:paging and not bbar:[paging].

lukefowell89
4 Nov 2010, 2:52 AM
Absolutely right again Condor! Thank you!

I have got the values to show up now, it all looks working, except it doesnt limit the amount of results to 2 per page even when I have set the limit to that and the number of pages is correct.

Ext.onReady(function(){

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

var dorsetStore = new Ext.data.Store({
proxy: proxy,
autoLoad: true,
baseParams: {side: 'dorset'},
reader: playerReader,
sortInfo:{field: 'name', direction: 'ASC'}
});

var soutwestStore = new Ext.data.Store({
proxy: proxy,
autoLoad: true,
baseParams: {side: 'southwest'},
reader: playerReader,
sortInfo: {field: 'name', direction: 'ASC'}
});

var fiveStore = new Ext.data.Store({
proxy: proxy,
autoLoad: true,
baseParams: {side: 'five'},
reader: playerReader,
sortInfo: {field: 'name', direction: 'ASC'}
});

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 100
},{
header: 'Name',
dataIndex: 'name',
width: 150
},{
header: 'Position',
dataIndex: 'position',
width: 150
}
]
);

var pagingDorset = new Ext.PagingToolbar({
pageSize: 2,
store: dorsetStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "not result to display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: 2,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "not result to display"
});

var tabMenu = new Ext.TabPanel( {
renderTo: Ext.getBody(),
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
id: 'tabMenu',
width: 'width: 100%'
});

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 300,
title: 'Dorset Team',
id: 'dorsetGrid',
bbar: pagingDorset
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'South-West Team',
height: 300,
id: 'southwestGrid',
bbar: pagingSouthWest
});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: '5-a-side Team',
height: 300,
id: 'fiveGrid'
})

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

});
23133

Thanks!

Condor
4 Nov 2010, 2:57 AM
Ext assumes you want to do remote paging (the start and limit parameters get send to the server and the server is supposed to return the correct records).
If you want to do local paging (the server returns all records and the store only shows the current page) then I recommend using the PagingStore user extension.

Also, you need to specify the start and limit parameters in the initial load, so use:

autoLoad: {
params: {
start: 0,
limit: 2
}
}

lukefowell89
4 Nov 2010, 3:03 AM
Ah ok I understand, what is it that the server side script will recieve? I would prefer to let the server return the correct pages. How do I go about processing these start and limit parameters? If I know they are being sent over as $_POST['start'] and $_POST['limit'] then I do not have a problem coding the PHP to return the limits, but at the moment I am unsure how it is being passed.

Also do those autoload parameters go within each store?

steffenk
4 Nov 2010, 3:09 AM
just view the ajax call in firebug and you'll see how the params are passed

lukefowell89
4 Nov 2010, 3:17 AM
Ah ok I see where it is passed now, that really helps! Thanks

Another thing, how do i send the order over before I limit them in SQL?

If for example I want to order them by position... then how do I pass that?

steffenk
4 Nov 2010, 3:49 AM
easy to find out: just sort in the grid by clicking on the column header and then do a pager, view the request. You'll find 2 more params, sort and dir

Condor
4 Nov 2010, 3:52 AM
You'll find 2 more params, sort and dir

Only if you configure the store with remoteSort:true.

lukefowell89
4 Nov 2010, 4:01 AM
:D Genius! Thanks got all that working now. I can view all the entries, order them and sort them into pages.

My next port of call is to be able to add a new player from a toolbar along the top, which I have started doing. I'm going to write it all out to the best of my ability, try and problem solve myself, but if i get stuck I will post my code on here to see if you guys can help me at all!

I have already learnt an incredible amount with your help!

Thanks

steffenk
4 Nov 2010, 4:14 AM
next time you post code please use the built in code boxes which makes it much more easy to read ;)

lukefowell89
4 Nov 2010, 4:48 AM
Hi Again!

I have been making a form that popups up which is located on the Top Toolbar and I am only testing on the dorset tab at the moment. It pops up, and displays fine. The data is pulled fine except in the positions combo, it only shows the first letter of each position???!? But the team combo works fine.

I am also trying to submit the data which is sending the request fine, but I am asking it to send the value of the team which is either (0,1,2) but to display (First Team, Reserve Team or Youth Team). But in the request it keeps sending the displayValue rather than the value I have asked it to send?

Thanks Again



var positions = ['Goalkeeper', 'Left Back', 'Right Back', 'Centre Back', 'Sweeper',
'Defensive Midfield', 'Attacking Midfield', 'Centre Midfield', 'Left Wing', 'Right Wing', 'Forward'];

var team = [[0,'First Team'],[1, 'Reserve Team'],[2,'Youth Team']];

Ext.onReady(function(){

var defaultPagesize = 10;

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
valueField: 'team',
store: teamStore,
xtype: 'combo',
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
triggerAction: 'all',
emptyText:'Select a team...',
selectOnFocus:true
});


var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

var dorsetStore = new Ext.data.Store({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'dorset'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'name', direction: 'ASC'}
});

var soutwestStore = new Ext.data.Store({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'southwest'},
reader: playerReader,
remoteSort:true,
sortInfo: {field: 'name', direction: 'ASC'}
});

var fiveStore = new Ext.data.Store({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'five'},
reader: playerReader,
sortInfo: {field: 'name', direction: 'ASC'}
});

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 100,
sortable: true
},{
header: 'Name',
dataIndex: 'name',
width: 150,
sortable: true
},{
header: 'Position',
dataIndex: 'position',
width: 150,
sortable: true
}
]
);



var addPlayerForm = new Ext.form.FormPanel({
frame: true,
title: 'Add Player',
width: 330,
url: 'add-player.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield'}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit();
}

}]
});

var addPlayerWindow = new Ext.Window(
{
title: 'Add New Player',
minimizable: true,
layout: 'fit',
height: 190,
items: addPlayerForm
});

var displayPlayerForm = function()
{
addPlayerWindow.show(true);
}

var generalToolbar = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm}]
});
var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm}]
});

var pagingDorset = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: dorsetStore,
id: 'pagingDorset',
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "not result to display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "not result to display"
});

var tabMenu = new Ext.TabPanel( {
renderTo: Ext.getBody(),
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
id: 'tabMenu',
width: 'width: 100%'
});

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'Reserve Team',
height: 288,
id: 'southwestGrid',
tbar: generalToolbar2,
bbar: pagingSouthWest
});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: 'Youth Team',
height: 261,
tbar: generalToolbar,
id: 'fiveGrid'
})

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

});

Condor
4 Nov 2010, 4:51 AM
Configure the store with expandData:true.

Or change your data to:

var positions = [
['Goalkeeper'],
['Left Back'],
['Right Back'],
['Centre Back'],
['Sweeper'],
['Defensive Midfield'],
['Attacking Midfield'],
['Centre Midfield'],
['Left Wing'],
['Right Wing'],
['Forward']
];

lukefowell89
4 Nov 2010, 5:01 AM
Thanks Condor!

That has fixed that, but how do i get the id of the team to display rather than the display text?

Condor
4 Nov 2010, 5:10 AM
var teamCombo = new Ext.form.ComboBox({
valueField: 'team',
store: teamStore,
xtype: 'combo',
displayField:'showTeam',
typeAhead: true,
mode: 'local',
hiddenName: 'team',
fieldLabel: 'Team',
triggerAction: 'all',
emptyText:'Select a team...',
selectOnFocus:true
});

lukefowell89
4 Nov 2010, 6:25 AM
All fixed! had to put both hiddenName and valueField to get it to work!

I have it all working now so it adds them to the grid, the parts I am currently stuck on is clearing the form after I have submitted, and refreshing the grid when I have added it

I currently am using this bit of code to hide the form on submit....



buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit();
addPlayerForm.getForm().reset();
addPlayerWindow.hide();
}

}]
The only problem is that it leaves the last combobox selected with "Youth Team" which is quite random seeing I havent tryed to enter anything in the Youth Team???

lukefowell89
4 Nov 2010, 6:27 AM
Also I am having an issue where, when I open the add player window, and then close it again I cannot open it again without refreshing giving me a javascript error of:

Error: this.manager is undefined
Source File: http://localhost/ext-3.2.1/ext-all-debug.js
Line: 26004

Any ideas?

Condor
4 Nov 2010, 6:43 AM
Closing a window will destroy all it's content.

You can either contiue closing and recreating the window (but you also need to recreate all content!)

or you could hide the window (closeAction:'hide') and reshow it.

lukefowell89
4 Nov 2010, 6:49 AM
Thank you!

I have it all working now so it adds them to the grid, the parts I am currently stuck on is clearing the form after I have submitted, and refreshing the grid when I have added it

I currently am using this bit of code to hide the form on submit....



buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit();
addPlayerForm.getForm().reset();
addPlayerWindow.hide();
}

}]
The only problem is that it leaves the last combobox selected with "Youth Team" which is quite random seeing I havent tryed to enter anything in the Youth Team???

Condor
4 Nov 2010, 7:06 AM
Initialize all fields with an initial 'value' config option (which will be the value the fields are reset to).

lukefowell89
4 Nov 2010, 7:16 AM
Ok, the form now resets perfectly, but the POST that is being sent no longer is sending the values, it is sending across the defaults.
It seems that even thou the order of my commands is to submit first then reset, it is reseting before the values are send, therefore sending across.... position = "please select a position" and team = "please select a team"

I am guessing I will need some kind of on('load') event to reset the form after the request has been sent? I am just not sure how to add this to my code

Condor
4 Nov 2010, 7:42 AM
You'll have to wait for the actioncomplete event before you can reset the form.

lukefowell89
4 Nov 2010, 7:56 AM
is this what you meant?


var addPlayerForm = new Ext.form.FormPanel({
frame: true,
width: 330,
url: 'add-players.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield', value: ''}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit();
dorsetStore.reload();
addPlayerWindow.hide(document.body);
addPlayerForm.on('actionComplete', function(){
addPlayerForm.getForm().reset()
});
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
}

}]
});

Condor
4 Nov 2010, 8:04 AM
Actually, I would configure the form with waitMsgTarget:true and use:

addPlayerForm.getForm().submit({
waitMsg: 'Adding player...',
success: function() {
addPlayerForm.getForm().reset()
addPlayerWindow.hide(document.body);
dorsetStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
}
});

lukefowell89
4 Nov 2010, 8:12 AM
hmmm, I tryed that and the loading bar comes up but then the form does not hide or reset? nor does the grid refresh?

There doesnt seem to be any errors either! I put an alert in that function to see if it came up, but there was nothing? for some reason it isnt firing!

The data is being added to the database though, but i need to refresh the page to be ablet o see it.

Condor
4 Nov 2010, 8:20 AM
I think you actually do get a submit error. Try also adding a 'failure' handler.

Do do know what kind of response a form submit expects?

lukefowell89
4 Nov 2010, 8:28 AM
You are 100% right again, there is an error, because the failure handler fires.

It turned out to be because I was echoing something from my PHP script which was causing it to fail.

Thanks again!

lukefowell89
4 Nov 2010, 8:32 AM
Another strange problem I am getting, which is only minor, but I have put in a delete button that deletes all the selected players. Which works, but for some reason when it comes to deleting all the players from that grid, it doesnt reload the datastore and show it as empty, it will delete the player but only show that it has been deleted after a refresh... :S


function deletePlayerSouthWest2(btn)
{
if(btn == "yes") {
var selections = southwestGrid.selModel.getSelections();
var players = [];
for(i=0;i<southwestGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
soutwestStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerSouthWest = function()
{
if(southwestGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(southwestGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerSouthWest2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+southwestGrid.selModel.getCount()+' players?',deletePlayerSouthWest2);
}

}

var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerSouthWest}]
});




Any ideas why?

Condor
4 Nov 2010, 8:38 AM
So you get the 'Player/s Deleted' message?

Are you sure the player(s) are correctly deleted and won't show up in a reload()?

ps. Or did you enable request caching (not really a smart thing to do, but you never know)?

lukefowell89
4 Nov 2010, 8:42 AM
I think i jumped the gun a little bit with that last one, it was a lil problem with my PHP script. So it wasnt a Ext Error at all! Sorry!

lukefowell89
5 Nov 2010, 1:34 AM
Hi,

What I want to achieve next is to be able to click on a record then that records details are loaded into a form which is next to the grid. I believe this should be relatively straight forward!

To start with I need to make sure my process is right...

Listen for a click on a row,
if only one row is selected grab its ID,
lookup ID using AJAX in DB,
set the values of the form to equal the values for that ID in the database
add a hidden field for the id to sit,
on submit, handle the event by submitting the data much like an add form but to a PHP page which will update the values

Now this is what I want to do, and I have knowledge on most parts but putting it all together is another thing,

Can someone confirm that this approach would work? And If so, how do I get the ID of a selected row?

Thanks

Condor
5 Nov 2010, 1:50 AM
Yes, it will work, but you can do this with one step less: You can formPanel.getForm().load() the form directly using AJAX (an passing the id in params).

lukefowell89
5 Nov 2010, 2:10 AM
Ok that sounds great, I am currently building my form, but I am struggling to get understand how I will get the form to put all the values of my combo boxes as selected?

Here is what I have done so far.

Here I am using selModel to get the id of a row and storing it, I havent used this yet


var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
}
}
}),
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});


I then have put together my form which I will place on a panel next to my grid:



var editForm = new Ext.form.FormPanel({
frame: true,
width: 200,
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
allowBlank: false,
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
allowBlank: false,
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
valueField: 'team'
}],
buttons:[{text: 'Save'}]

});



my Combo boxes were pre-defined as I thought I should reuse the ones I used for the add form.


//COMBO BOX VALUES

var positions = [['Goalkeeper'], ['Left Back'], ['Right Back'], ['Centre Back'], ['Sweeper'],
['Defensive Midfield'], ['Attacking Midfield'], ['Centre Midfield'], ['Left Wing'], ['Right Wing'], ['Forward']];

var team = [[1,'First Team'],[2, 'Reserve Team'],[0,'Youth Team']];

//SIMPLE STORES FOR COMBO BOX VALUES

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});

//COMBO SELECT BOXES FOR POSITION AND TEAM

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
value: 'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
emptyText:'Select a team...',
selectOnFocus:true
});



I dont really have any direction of what I am doing at the moment and really am just shooting in the dark, I would prefer to understand the correct way of doing it so in future I understand why it is done that way

Thanks

Condor
5 Nov 2010, 3:06 AM
Do you really want to use 'rowselect'? 'rowclick' or 'rowdblclick' seem more approriate.

Also, your grid contains all the data for your form, do you really need to load anything else from the server?


rowselect: function(sm, index, record){
editWin.show();
editForm.getForm().loadRecord(record);
}

lukefowell89
5 Nov 2010, 4:18 AM
Thanks, I now have that all working with an edit feature

I have uploaded to a test domain what I am done so far, but I have a couple of little issues that I cannot seem to fix.


The sorting/ordering doesnt work on the Reserve Team Tab
After I have updated a players details, the form is meant to clear but it doesn't. it repopulates itself afterwards!
When I click on my 2nd Combo Box, 'Team'. When I click on it and then click off it will default to the last option in the combo box rather than the empty text value. When I reset the form it also defaults to "Youth Team".

My project so far can be found at: http://www.aztec-online.com/football_test

Please can I have some suggestions?

Cheers

Condor
5 Nov 2010, 4:40 AM
1. You have remoteSort:true set on that store, so your server will need to process the 'sort' and 'dir' parameters.

2. In the actioncomplete event (or the submit success handler) reset() the form. This will reset the form to it's original values (so you do have to initialize the fields with 'blank' values - otherwise they will reset to the first loaded record).

3. I would configure the combobox with triggerAction:'all' and either forceSelection:true or editable:false (depending on your preference).

lukefowell89
5 Nov 2010, 4:55 AM
Ok I thought I had already done that for point 1, but i just handed copyed and pasted the query!

Point 2 also works now except the Team combo box defaults to "Youth Team"

So the only issue I have left to solve is stopping the "Youth Team" coming up, I have put what you said into the combobox, but it doesnt make a difference.

Here is the code for the combobox and the edit form:



var team = [[1,'First Team'],[2, 'Reserve Team'],[0,'Youth Team']];

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});


var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
forceSelection: true,
emptyText:'Select a team...',
selectOnFocus:true
});

//EDIT FORM

var editForm = new Ext.form.FormPanel({
frame: true,
width: 325,
title: 'Edit Player',
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position',
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
forceSelection: true,
valueField: 'team',
typeAhead: true,
forceSelection: true,

selectOnFocus: true,
triggerAction: 'all'
}],
buttons:[{
text: 'Save',
handler: function() {
editForm.getForm().submit({
waitMsg: 'Saving player...',
success: function(form, action) {
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been edited!',function(){
editForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editForm.getForm().findField('id').setValue('');
editForm.getForm().findField('name').setValue('');
editForm.getForm().findField('position').setValue('');
editForm.getForm().findField('team').setValue('');

}
}]

});

Thanks

Condor
5 Nov 2010, 5:33 AM
Your problem is that (0 == '') === true.

How far along is the project? Can you still pick another team value for "Youth team"?

lukefowell89
5 Nov 2010, 5:40 AM
ah ok, that shouldnt be much of a problem to change, only about 2-3 files

Thanks

lukefowell89
5 Nov 2010, 8:09 AM
Hi Again,

I am now trying to build in a search to a toolbar along the top!

You can see what I am trying to do here: http://www.aztec-online.com/football_test

My problems are as follow:

1. Having problems with defining my datastore
2. No POST request is being sent, (checked in firebug)
3. Once I have opened tab, and closed again then it will not open again

Please help!

Here is my code:



//COMBO BOX VALUES

var positions = [['Goalkeeper'], ['Left Back'], ['Right Back'], ['Centre Back'], ['Sweeper'],
['Defensive Midfield'], ['Attacking Midfield'], ['Centre Midfield'], ['Left Wing'], ['Right Wing'], ['Forward']];

var team = [[1,'First Team'],[2, 'Reserve Team'],[3,'Youth Team']];
var searchStore;


Ext.onReady(function(){

//DEFAULT VARS

var defaultPagesize = 10;

//SIMPLE STORES FOR COMBO BOX VALUES

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});

//COMBO SELECT BOXES FOR POSITION AND TEAM

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
value: 'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
forceSelection: true,
emptyText:'Select a team...',
selectOnFocus:true
});

//DEFAULT PROXY FOR DATASTORES

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

//DEFAULT JSON READER FOR DATASTORES

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

//DATA STORES

var dorsetStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'dorset'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var soutwestStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'southwest'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var fiveStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'five'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

//COLUMN MODEL FOR GRIDS

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},{
header: 'Name',
dataIndex: 'name',
width: 213,
sortable: true
},{
header: 'Position',
dataIndex: 'position',
width: 213,
sortable: true
}
]
);

//EDIT FORM

var editForm = new Ext.form.FormPanel({
frame: true,
width: 325,
border: false,
title: 'Edit Player',
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position',
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
valueField: 'team',
forceSelection: true,
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
}],
buttons:[{
text: 'Save',
handler: function() {
editForm.getForm().submit({
waitMsg: 'Saving player...',
success: function(form, action) {
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been edited!',function(){
editForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editForm.getForm().findField('id').setValue('');
editForm.getForm().findField('name').setValue('');
editForm.getForm().findField('position').setValue('');
editForm.getForm().findField('team').setValue('');

}
}]

});

//ADD PLAYER FORM

var addPlayerForm = new Ext.form.FormPanel({
frame: true,
width: 330,
collapsible: true,
waitMsgTarget:true,
url: 'add-players.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield', value: ''}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit({
waitMsg: 'Adding player...',
success: function(form, action) {
addPlayerForm.getForm().reset();
addPlayerWindow.hide(document.body);
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
},
failure: function(){
alert('EROOR');
}
});

}

}]
});

//ADD PLAYER WINDOW

var addPlayerWindow = new Ext.Window(
{
title: 'Add New Player',
collapsible: true,
layout: 'fit',
height: 152,
items: addPlayerForm,
closeAction:'hide'
});

//DISPLAY ADD PLAYER FORM

var displayPlayerForm = function()
{
addPlayerWindow.show(true);
}

//DELETE PLAYERS

function deletePlayerDorset2(btn)
{
if(btn == "yes") {
var selections = dorsetGrid.selModel.getSelections();
var players = [];
for(i=0;i<dorsetGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result = eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
dorsetStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerDorset = function()
{
if(dorsetGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(dorsetGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerDorset2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+dorsetGrid.selModel.getCount()+' players?',deletePlayerDorset2);
}

}

function deletePlayerSouthWest2(btn)
{
if(btn == "yes") {
var selections = southwestGrid.selModel.getSelections();
var players = [];
for(i=0;i<southwestGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
soutwestStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerSouthWest = function()
{
if(southwestGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(southwestGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerSouthWest2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+southwestGrid.selModel.getCount()+' players?',deletePlayerSouthWest2);
}
}

function deletePlayerFive2(btn)
{
if(btn == "yes") {
var selections = fiveGrid.selModel.getSelections();
var players = [];
for(i=0;i<fiveGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
fiveStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerFive = function()
{
if(fiveGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(fiveGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerFive2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+fiveGrid.selModel.getCount()+' players?',deletePlayerFive2);
}

}

//TOP GENERAL TOOLBAR

var generalToolbar = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerDorset}]
});
var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerSouthWest}]
});
var generalToolbar3 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerFive}]
});

//BOTTOM PAGING TOOLBAR

var pagingDorset = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: dorsetStore,
id: 'pagingDorset',
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingFive = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: fiveStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

//TAB MENU

var tabMenu = new Ext.TabPanel( {
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
border: false,
style: {
marginTop: '5px'
},
title: 'Players',
id: 'tabMenu'
});

var tabMenuPanel = new Ext.Panel({
id: 'tabMenuPanel',
plain: true,
items: tabMenu,
border: false
});

function populateForm(idnum)
{
editForm.getForm().load({
url: 'get-players-edit.php',
params: {id:idnum}
});
}

// GRIDS

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'Reserve Team',
height: 288,
id: 'southwestGrid',
tbar: generalToolbar2,
bbar: pagingSouthWest,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: 'Youth Team',
height: 288,
tbar: generalToolbar3,
bbar: pagingFive,
id: 'fiveGrid',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var clubStats = new Ext.Panel({
width: 325,
height: 173,
contentEl: 'club_stats',
title: 'Club Stats'
});



var mainPanel = new Ext.Panel({
layout: 'border',
border: false,
items: [{
region: 'center',
items: tabMenuPanel,
autoHeight: true
},{
region: 'east',
items: [editForm,clubStats],
width: 325,
border: false,
autoHeight: true,
id: 'editFormPanel',
split: true
}],
tbar: {

items: ['->',
{
xtype: 'textfield',
name: 'searchterm',
id: 'searci'
},'-',{
xtype: 'button',
text: 'Search',
handler: function(){
if(Ext.get('searci').getValue() != "") {
var searchterm = Ext.get('searci').getValue();
var searchStore = new Ext.data.Store({
reader: playerReader,
baseParams: {st: searchterm},
proxy: proxy
});
var searchtab = tabMenu.add('searchResultsTab');
tabMenu.setActiveTab(searchtab);
}
else
{
Ext.MessageBox.alert('Notification','Please Enter a search term');
}
}
}]
}

});

var searchResultsTab = new Ext.grid.GridPanel({
title: 'Search Results',
id: 'searchResultsTab',
closable: true,
store: searchStore,
colModel: dorsetCol,
closeAction:'hide'
});

var mainView = new Ext.Viewport({
layout: 'fit',
items: [mainPanel]
});

//ADD GRIDS TO TAB MENU

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

});


//COMBO BOX VALUES

var positions = [['Goalkeeper'], ['Left Back'], ['Right Back'], ['Centre Back'], ['Sweeper'],
['Defensive Midfield'], ['Attacking Midfield'], ['Centre Midfield'], ['Left Wing'], ['Right Wing'], ['Forward']];

var team = [[1,'First Team'],[2, 'Reserve Team'],[3,'Youth Team']];
var searchStore;


Ext.onReady(function(){

//DEFAULT VARS

var defaultPagesize = 10;

//SIMPLE STORES FOR COMBO BOX VALUES

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});

//COMBO SELECT BOXES FOR POSITION AND TEAM

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
value: 'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
forceSelection: true,
emptyText:'Select a team...',
selectOnFocus:true
});

//DEFAULT PROXY FOR DATASTORES

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

//DEFAULT JSON READER FOR DATASTORES

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

//DATA STORES

var dorsetStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'dorset'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var soutwestStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'southwest'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var fiveStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'five'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

//COLUMN MODEL FOR GRIDS

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},{
header: 'Name',
dataIndex: 'name',
width: 213,
sortable: true
},{
header: 'Position',
dataIndex: 'position',
width: 213,
sortable: true
}
]
);

//EDIT FORM

var editForm = new Ext.form.FormPanel({
frame: true,
width: 325,
border: false,
title: 'Edit Player',
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position',
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
valueField: 'team',
forceSelection: true,
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
}],
buttons:[{
text: 'Save',
handler: function() {
editForm.getForm().submit({
waitMsg: 'Saving player...',
success: function(form, action) {
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been edited!',function(){
editForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editForm.getForm().findField('id').setValue('');
editForm.getForm().findField('name').setValue('');
editForm.getForm().findField('position').setValue('');
editForm.getForm().findField('team').setValue('');

}
}]

});

//ADD PLAYER FORM

var addPlayerForm = new Ext.form.FormPanel({
frame: true,
width: 330,
collapsible: true,
waitMsgTarget:true,
url: 'add-players.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield', value: ''}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit({
waitMsg: 'Adding player...',
success: function(form, action) {
addPlayerForm.getForm().reset();
addPlayerWindow.hide(document.body);
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
},
failure: function(){
alert('EROOR');
}
});

}

}]
});

//ADD PLAYER WINDOW

var addPlayerWindow = new Ext.Window(
{
title: 'Add New Player',
collapsible: true,
layout: 'fit',
height: 152,
items: addPlayerForm,
closeAction:'hide'
});

//DISPLAY ADD PLAYER FORM

var displayPlayerForm = function()
{
addPlayerWindow.show(true);
}

//DELETE PLAYERS

function deletePlayerDorset2(btn)
{
if(btn == "yes") {
var selections = dorsetGrid.selModel.getSelections();
var players = [];
for(i=0;i<dorsetGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result = eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
dorsetStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerDorset = function()
{
if(dorsetGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(dorsetGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerDorset2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+dorsetGrid.selModel.getCount()+' players?',deletePlayerDorset2);
}

}

function deletePlayerSouthWest2(btn)
{
if(btn == "yes") {
var selections = southwestGrid.selModel.getSelections();
var players = [];
for(i=0;i<southwestGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
soutwestStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerSouthWest = function()
{
if(southwestGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(southwestGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerSouthWest2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+southwestGrid.selModel.getCount()+' players?',deletePlayerSouthWest2);
}
}

function deletePlayerFive2(btn)
{
if(btn == "yes") {
var selections = fiveGrid.selModel.getSelections();
var players = [];
for(i=0;i<fiveGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
fiveStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerFive = function()
{
if(fiveGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(fiveGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerFive2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+fiveGrid.selModel.getCount()+' players?',deletePlayerFive2);
}

}

//TOP GENERAL TOOLBAR

var generalToolbar = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerDorset}]
});
var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerSouthWest}]
});
var generalToolbar3 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerFive}]
});

//BOTTOM PAGING TOOLBAR

var pagingDorset = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: dorsetStore,
id: 'pagingDorset',
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingFive = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: fiveStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

//TAB MENU

var tabMenu = new Ext.TabPanel( {
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
border: false,
style: {
marginTop: '5px'
},
title: 'Players',
id: 'tabMenu'
});

var tabMenuPanel = new Ext.Panel({
id: 'tabMenuPanel',
plain: true,
items: tabMenu,
border: false
});

function populateForm(idnum)
{
editForm.getForm().load({
url: 'get-players-edit.php',
params: {id:idnum}
});
}

// GRIDS

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'Reserve Team',
height: 288,
id: 'southwestGrid',
tbar: generalToolbar2,
bbar: pagingSouthWest,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: 'Youth Team',
height: 288,
tbar: generalToolbar3,
bbar: pagingFive,
id: 'fiveGrid',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var clubStats = new Ext.Panel({
width: 325,
height: 173,
contentEl: 'club_stats',
title: 'Club Stats'
});



var mainPanel = new Ext.Panel({
layout: 'border',
border: false,
items: [{
region: 'center',
items: tabMenuPanel,
autoHeight: true
},{
region: 'east',
items: [editForm,clubStats],
width: 325,
border: false,
autoHeight: true,
id: 'editFormPanel',
split: true
}],
tbar: {

items: ['->',
{
xtype: 'textfield',
name: 'searchterm',
id: 'searci'
},'-',{
xtype: 'button',
text: 'Search',
handler: function(){
if(Ext.get('searci').getValue() != "") {
var searchterm = Ext.get('searci').getValue();
var searchStore = new Ext.data.Store({
reader: playerReader,
baseParams: {st: searchterm},
proxy: proxy
});
var searchtab = tabMenu.add('searchResultsTab');
tabMenu.setActiveTab(searchtab);
}
else
{
Ext.MessageBox.alert('Notification','Please Enter a search term');
}
}
}]
}

});

var searchResultsTab = new Ext.grid.GridPanel({
title: 'Search Results',
id: 'searchResultsTab',
closable: true,
store: searchStore,
colModel: dorsetCol,
closeAction:'hide'
});

var mainView = new Ext.Viewport({
layout: 'fit',
items: [mainPanel]
});

//ADD GRIDS TO TAB MENU

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

})


The code related to my search tab are found towards the bottom!
The textfield and button being included the mainPanel (tbar)

lukefowell89
5 Nov 2010, 9:09 AM
Forget that last post now, I have managed to nearly get it all working,

see it here http://www.aztec-online.com/football_test

My problem is that my search results are not showing in the grid! They have been sent back by the server correctly! (firebug) but for some reason it will not populate the grid? I am not sure if the problem lies with the datastore or the grid itself!

please help!



//COMBO BOX VALUES

var positions = [['Goalkeeper'], ['Left Back'], ['Right Back'], ['Centre Back'], ['Sweeper'],
['Defensive Midfield'], ['Attacking Midfield'], ['Centre Midfield'], ['Left Wing'], ['Right Wing'], ['Forward']];

var team = [[1,'First Team'],[2, 'Reserve Team'],[3,'Youth Team']];
var searchStore;


Ext.onReady(function(){

//DEFAULT VARS

var defaultPagesize = 10;

//SIMPLE STORES FOR COMBO BOX VALUES

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});



//COMBO SELECT BOXES FOR POSITION AND TEAM

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
value: 'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
forceSelection: true,
emptyText:'Select a team...',
selectOnFocus:true
});

//DEFAULT PROXY FOR DATASTORES

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

//DEFAULT JSON READER FOR DATASTORES

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

//DATA STORES

var dorsetStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'dorset'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var soutwestStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'southwest'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var fiveStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'five'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

function makeSearch(search){

var searchStore = new Ext.data.GroupingStore({
reader: playerReader,
baseParams: {st: search},
proxy: proxy,
autoLoad: { params: {start: 0, limit: defaultPagesize}},
remoteSort: true,
sortInfo:{field: 'position', direction: 'ASC'}
});
}

//COLUMN MODEL FOR GRIDS

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},{
header: 'Name',
dataIndex: 'name',
width: 213,
sortable: true
},{
header: 'Position',
dataIndex: 'position',
width: 213,
sortable: true
}
]
);

//EDIT FORM

var editForm = new Ext.form.FormPanel({
frame: true,
width: 325,
border: false,
title: 'Edit Player',
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position',
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
valueField: 'team',
forceSelection: true,
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
}],
buttons:[{
text: 'Save',
handler: function() {
editForm.getForm().submit({
waitMsg: 'Saving player...',
success: function(form, action) {
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been edited!',function(){
editForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editForm.getForm().findField('id').setValue('');
editForm.getForm().findField('name').setValue('');
editForm.getForm().findField('position').setValue('');
editForm.getForm().findField('team').setValue('');

}
}]

});

//ADD PLAYER FORM

var addPlayerForm = new Ext.form.FormPanel({
frame: true,
width: 330,
waitMsgTarget:true,
url: 'add-players.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield', value: ''}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit({
waitMsg: 'Adding player...',
success: function(form, action) {
addPlayerForm.getForm().reset();
addPlayerWindow.hide(document.body);
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
},
failure: function(){
alert('EROOR');
}
});

}

}]
});

//ADD PLAYER WINDOW

var addPlayerWindow = new Ext.Window(
{
title: 'Add New Player',
collapsible: true,
layout: 'fit',
height: 152,
items: addPlayerForm,
closeAction:'hide'
});

//DISPLAY ADD PLAYER FORM

var displayPlayerForm = function()
{
addPlayerWindow.show(true);
}

//DELETE PLAYERS

function deletePlayerDorset2(btn)
{
if(btn == "yes") {
var selections = dorsetGrid.selModel.getSelections();
var players = [];
for(i=0;i<dorsetGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result = eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
dorsetStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerDorset = function()
{
if(dorsetGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(dorsetGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerDorset2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+dorsetGrid.selModel.getCount()+' players?',deletePlayerDorset2);
}

}

function deletePlayerSouthWest2(btn)
{
if(btn == "yes") {
var selections = southwestGrid.selModel.getSelections();
var players = [];
for(i=0;i<southwestGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
soutwestStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerSouthWest = function()
{
if(southwestGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(southwestGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerSouthWest2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+southwestGrid.selModel.getCount()+' players?',deletePlayerSouthWest2);
}
}

function deletePlayerFive2(btn)
{
if(btn == "yes") {
var selections = fiveGrid.selModel.getSelections();
var players = [];
for(i=0;i<fiveGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
fiveStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerFive = function()
{
if(fiveGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(fiveGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerFive2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+fiveGrid.selModel.getCount()+' players?',deletePlayerFive2);
}

}

//TOP GENERAL TOOLBAR

var generalToolbar = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerDorset}]
});
var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerSouthWest}]
});
var generalToolbar3 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerFive}]
});

//BOTTOM PAGING TOOLBAR

var pagingDorset = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: dorsetStore,
id: 'pagingDorset',
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingFive = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: fiveStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

//TAB MENU

var tabMenu = new Ext.TabPanel( {
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
border: false,
autoDestroy: false,
style: {
marginTop: '5px'
},
title: 'Players',
id: 'tabMenu'
});

var tabMenuPanel = new Ext.Panel({
id: 'tabMenuPanel',
plain: true,
items: tabMenu,
border: false
});

function populateForm(idnum)
{
editForm.getForm().load({
url: 'get-players-edit.php',
params: {id:idnum}
});
}

// GRIDS

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'Reserve Team',
height: 288,
id: 'southwestGrid',
tbar: generalToolbar2,
bbar: pagingSouthWest,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: 'Youth Team',
height: 288,
tbar: generalToolbar3,
bbar: pagingFive,
id: 'fiveGrid',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var clubStats = new Ext.Panel({
width: 325,
height: 173,
contentEl: 'club_stats',
title: 'Club Stats'
});



var mainPanel = new Ext.Panel({
layout: 'border',
border: false,
items: [{
region: 'center',
items: tabMenuPanel,
autoHeight: true
},{
region: 'east',
items: [editForm,clubStats],
width: 325,
border: false,
autoHeight: true,
id: 'editFormPanel',
split: true
}],
tbar: {

items: ['->',
{
xtype: 'textfield',
name: 'searchterm',
id: 'searci'
},'-',{
xtype: 'button',
text: 'Search',
handler: function(){
if(Ext.get('searci').getValue() != "") {
var searchterm = Ext.get('searci').getValue();
makeSearch(searchterm);
Ext.getCmp('searci').setValue();
var searchtab = tabMenu.add('searchResultsTab');
tabMenu.setActiveTab(searchtab);
tabMenu.doLayout();
}
else
{
Ext.MessageBox.alert('Notification','Please Enter a search term');
}
}
}]
}

});

var searchResultsTab = new Ext.grid.GridPanel({
title: 'Search Results',
id: 'searchResultsTab',
closable: true,
store: searchStore,
colModel: dorsetCol,
height: 200,
autoLoad: true,
closeAction:'hide',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var mainView = new Ext.Viewport({
layout: 'fit',
items: [mainPanel]
});

//ADD GRIDS TO TAB MENU

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

});

Condor
5 Nov 2010, 11:47 AM
Why are you creating a new store when searching? You should be setting the baseParams of an existing store and loading it with start and limit params.

lukefowell89
6 Nov 2010, 11:38 AM
How would I go about doing that? Adding new params to an existing store?

Condor
7 Nov 2010, 4:10 AM
searchStore.baseParams = {st: search};
searchStore.load({params: {start: 0, limit: 20}});

lukefowell89
7 Nov 2010, 2:27 PM
Lifesaver, thank you very much!

lukefowell89
8 Nov 2010, 1:34 AM
Hi,

I have got my search working now in a new tab, all displays correctly and everything works fine... until I close the search tab then all the other tabs start messing up. Also when i do a search for a player that is there and get my result, and then try to do another search for a player that isnt there the display doesnt change!

I really do not know why the height of the other tabs is increased when the search tab is closed! they are are fine as long as its open!

Any ideas?



//COMBO BOX VALUES

var positions = [['Goalkeeper'], ['Left Back'], ['Right Back'], ['Centre Back'], ['Sweeper'],
['Defensive Midfield'], ['Attacking Midfield'], ['Centre Midfield'], ['Left Wing'], ['Right Wing'], ['Forward']];

var team = [[1,'First Team'],[2, 'Reserve Team'],[3,'Youth Team']];
var searchStore;


Ext.onReady(function(){

//DEFAULT VARS

var defaultPagesize = 10;

//SIMPLE STORES FOR COMBO BOX VALUES

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});



//COMBO SELECT BOXES FOR POSITION AND TEAM

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
value: 'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
forceSelection: true,
emptyText:'Select a team...',
selectOnFocus:true
});

//DEFAULT PROXY FOR DATASTORES

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

//DEFAULT JSON READER FOR DATASTORES

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

//DATA STORES

var dorsetStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'dorset'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var soutwestStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'southwest'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var fiveStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'five'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var searchStore = new Ext.data.GroupingStore({
proxy: proxy,
reader: playerReader,
remoteSort: true,
sortInfo:{field: 'position', direction: 'ASC'}
});

//COLUMN MODEL FOR GRIDS

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},{
header: 'Name',
dataIndex: 'name',
width: 213,
sortable: true
},{
header: 'Position',
dataIndex: 'position',
width: 213,
sortable: true
}
]
);

//EDIT FORM

var editForm = new Ext.form.FormPanel({
frame: true,
width: 325,
border: false,
title: 'Edit Player',
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position',
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
valueField: 'team',
forceSelection: true,
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
}],
buttons:[{
text: 'Save',
handler: function() {
editForm.getForm().submit({
waitMsg: 'Saving player...',
success: function(form, action) {
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been edited!',function(){
editForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editForm.getForm().findField('id').setValue('');
editForm.getForm().findField('name').setValue('');
editForm.getForm().findField('position').setValue('');
editForm.getForm().findField('team').setValue('');

}
}]

});

//ADD PLAYER FORM

var addPlayerForm = new Ext.form.FormPanel({
frame: true,
width: 330,
waitMsgTarget:true,
url: 'add-players.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield', value: ''}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit({
waitMsg: 'Adding player...',
success: function(form, action) {
addPlayerForm.getForm().reset();
addPlayerWindow.hide(document.body);
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
},
failure: function(){
alert('EROOR');
}
});

}

}]
});

//ADD PLAYER WINDOW

var addPlayerWindow = new Ext.Window(
{
title: 'Add New Player',
collapsible: true,
layout: 'fit',
height: 152,
items: addPlayerForm,
closeAction:'hide'
});

//DISPLAY ADD PLAYER FORM

var displayPlayerForm = function()
{
addPlayerWindow.show(true);
}

//DELETE PLAYERS

function deletePlayerDorset2(btn)
{
if(btn == "yes") {
var selections = dorsetGrid.selModel.getSelections();
var players = [];
for(i=0;i<dorsetGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result = eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
dorsetStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerDorset = function()
{
if(dorsetGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(dorsetGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerDorset2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+dorsetGrid.selModel.getCount()+' players?',deletePlayerDorset2);
}

}

function deletePlayerSouthWest2(btn)
{
if(btn == "yes") {
var selections = southwestGrid.selModel.getSelections();
var players = [];
for(i=0;i<southwestGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
soutwestStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerSouthWest = function()
{
if(southwestGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(southwestGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerSouthWest2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+southwestGrid.selModel.getCount()+' players?',deletePlayerSouthWest2);
}
}

function deletePlayerFive2(btn)
{
if(btn == "yes") {
var selections = fiveGrid.selModel.getSelections();
var players = [];
for(i=0;i<fiveGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
fiveStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerFive = function()
{
if(fiveGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(fiveGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerFive2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+fiveGrid.selModel.getCount()+' players?',deletePlayerFive2);
}

}

//TOP GENERAL TOOLBAR

var generalToolbar = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerDorset}]
});
var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerSouthWest}]
});
var generalToolbar3 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerFive}]
});

//BOTTOM PAGING TOOLBAR

var pagingDorset = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: dorsetStore,
id: 'pagingDorset',
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingFive = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: fiveStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSearch = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: searchStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

//TAB MENU

var tabMenu = new Ext.TabPanel( {
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
border: false,
autoDestroy: false,
style: {
marginTop: '5px'
},
title: 'Players',
id: 'tabMenu'
});

var tabMenuPanel = new Ext.Panel({
id: 'tabMenuPanel',
plain: true,
items: tabMenu,
border: false
});

function populateForm(idnum)
{
editForm.getForm().load({
url: 'get-players-edit.php',
params: {id:idnum}
});
}

// GRIDS

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'Reserve Team',
height: 288,
id: 'southwestGrid',
tbar: generalToolbar2,
bbar: pagingSouthWest,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: 'Youth Team',
height: 288,
tbar: generalToolbar3,
bbar: pagingFive,
id: 'fiveGrid',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var clubStats = new Ext.Panel({
width: 325,
height: 173,
contentEl: 'club_stats',
title: 'Club Stats'
});



var mainPanel = new Ext.Panel({
layout: 'border',
border: false,
items: [{
region: 'center',
items: tabMenuPanel,
autoHeight: true
},{
region: 'east',
items: [editForm,clubStats],
width: 325,
border: false,
autoHeight: true,
id: 'editFormPanel',
split: true
}],
tbar: {

items: ['->',
{
xtype: 'textfield',
name: 'searchterm',
id: 'searci'
},'-',{
xtype: 'button',
text: 'Search',
handler: function(){
if(Ext.get('searci').getValue() != "") {
var search = Ext.get('searci');
var searchterm = search.getValue();
searchStore.baseParams = {st: searchterm};
searchStore.load({ params:{start: 0, limit: defaultPagesize}});
var searchtab = tabMenu.add('searchResultsTab');
tabMenu.setActiveTab(searchtab);
tabMenu.doLayout();
}
else
{
Ext.MessageBox.alert('Notification','Please Enter a search term');
}
}
}]
}

});

var searchResultsTab = new Ext.grid.GridPanel({
title: 'Search Results',
id: 'searchResultsTab',
closable: true,
store: searchStore,
colModel: dorsetCol,
height: 288,
bbar: pagingSearch,
closeAction:'hide',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var mainView = new Ext.Viewport({
layout: 'fit',
items: [mainPanel]
});

//ADD GRIDS TO TAB MENU

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

});

lukefowell89
8 Nov 2010, 3:16 AM
I have another issue with changing my screens! I have implemented a toolbar along the top which I am going to use to change between different sections (Players, Fixtures, Results etc.).

I havent completly finished the code yet, but there is no reason why it shouldnt be showing up....

Here is my code:

//COMBO BOX VALUES

var positions = [['Goalkeeper'], ['Left Back'], ['Right Back'], ['Centre Back'], ['Sweeper'],
['Defensive Midfield'], ['Attacking Midfield'], ['Centre Midfield'], ['Left Wing'], ['Right Wing'], ['Forward']];

var team = [[1,'First Team'],[2, 'Reserve Team'],[3,'Youth Team']];
var searchStore;


Ext.onReady(function(){

//DEFAULT VARS

var defaultPagesize = 10;

//SIMPLE STORES FOR COMBO BOX VALUES

var positionStore = new Ext.data.SimpleStore({
fields: ['position'],
data : positions
});

var teamStore = new Ext.data.SimpleStore({
fields: ['team','showTeam'],
data: team
});



//COMBO SELECT BOXES FOR POSITION AND TEAM

var positionCombo = new Ext.form.ComboBox({
valueField: 'position',
store: positionStore,
xtype: 'combo',
displayField:'position',
typeAhead: true,
mode: 'local',
name: 'position',
fieldLabel: 'Position',
triggerAction: 'all',
emptyText:'Select a position...',
value: 'Select a position...',
selectOnFocus:true
});

var teamCombo = new Ext.form.ComboBox({
store: teamStore,
displayField:'showTeam',
typeAhead: true,
mode: 'local',
name: 'team',
fieldLabel: 'Team',
hiddenName: 'team',
valueField: 'team',
value: 'Select a team...',
triggerAction: 'all',
forceSelection: true,
emptyText:'Select a team...',
selectOnFocus:true
});

//DEFAULT PROXY FOR DATASTORES

var proxy = new Ext.data.HttpProxy({
url: 'get-players.php',
method: 'POST'
});

var proxy2 = new Ext.data.HttpProxy({
url: 'get-fixtures.php',
method: 'POST'
});

//DEFAULT JSON READER FOR DATASTORES

var playerReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'name', mapping: 'name'},
{name: 'position', mapping: 'position'},
{name: 'team', mapping: 'team'}
]);

var fixtureReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id'},
{name: 'date', mapping: 'date'},
{name: 'opponent', mapping: 'opponent'},
{name: 'kotime', mapping: 'kotime'},
{name: 'type', mapping: 'type'},
{name: 'location', mapping: 'location'}
]);

//DATA STORES

var dorsetStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'dorset'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var soutwestStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'southwest'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var fiveStore = new Ext.data.GroupingStore({
proxy: proxy,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
baseParams: {side: 'five'},
reader: playerReader,
remoteSort:true,
sortInfo:{field: 'position', direction: 'ASC'}
});

var fixtureStore = new Ext.data.GroupingStore({
proxy: proxy2,
autoLoad: {params: {start: 0, limit:defaultPagesize}},
reader: fixtureReader,
remoteSort:true,
sortInfo:{field: 'date', direction: 'ASC'}
});

var searchStore = new Ext.data.GroupingStore({
proxy: proxy,
reader: playerReader,
remoteSort: true,
sortInfo:{field: 'position', direction: 'ASC'}
});

//COLUMN MODEL FOR GRIDS

var dorsetCol = new Ext.grid.ColumnModel(
[{
header: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},{
header: 'Name',
dataIndex: 'name',
width: 213,
sortable: true
},{
header: 'Position',
dataIndex: 'position',
width: 213,
sortable: true
}
]
);

var fixtureCol = new Ext.grid.ColumnModel(
[{
header: 'Date',
dataIndex: 'date',
width: 80,
sortable: true
},{
header: 'Opponent',
dataIndex: 'opponent',
width: 150,
sortable: true
},{
header: 'Location',
dataIndex: 'location',
width: 100,
sortable: true
},{
header: 'KO Time',
dataIndex: 'kotime',
width: 80,
sortable: true
},{
header: 'Type',
dataIndex: 'type',
width: 100,
sortable: true
},
]
);

//EDIT FORM

var editForm = new Ext.form.FormPanel({
frame: true,
width: 325,
border: false,
title: 'Edit Player',
waitMsgTarget: true,
url: 'edit-players.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
fieldLabel: 'Position',
name: 'position',
mode: 'local',
emptyText:'Select a position...',
store: positionStore,
displayField: 'position',
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
},{
xtype: 'combo',
fieldLabel: 'Team',
name: 'team',
mode: 'local',
emptyText:'Select a team...',
store: teamStore,
displayField: 'showTeam',
hiddenName: 'team',
valueField: 'team',
forceSelection: true,
typeAhead: true,
selectOnFocus: true,
triggerAction: 'all'
}],
buttons:[{
text: 'Save',
handler: function() {
editForm.getForm().submit({
waitMsg: 'Saving player...',
success: function(form, action) {
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been edited!',function(){
editForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editForm.getForm().findField('id').setValue('');
editForm.getForm().findField('name').setValue('');
editForm.getForm().findField('position').setValue('');
editForm.getForm().findField('team').setValue('');

}
}]

});


var editFixtureForm = new Ext.form.FormPanel({
frame: true,
width: 325,
border: false,
title: 'Edit Fixture',
waitMsgTarget: true,
url: 'edit-fixture.php',
defaults: {width: 200},
items:[{
xtype: 'hidden',
name: 'id'
}],
buttons:[{
text: 'Save',
handler: function() {
editFixtureForm.getForm().submit({
waitMsg: 'Saving fixture...',
success: function(form, action) {
fixtureStore.reload();
Ext.MessageBox.alert('Confirmation', 'Fixture has been edited!',function(){
editFixtureForm.getForm().reset();
});

}
});

}
},{
text: 'Clear',
handler: function() {
editFixtureForm.getForm().reset();
}
}]

});

//ADD PLAYER FORM

var addPlayerForm = new Ext.form.FormPanel({
frame: true,
width: 330,
waitMsgTarget:true,
url: 'add-players.php',
defaults: {width: 200},
items:[{
fieldLabel: 'Name',
name: 'name', xtype: 'textfield', value: ''}, positionCombo, teamCombo],
buttons:[{
text: 'Submit',
handler: function() {
addPlayerForm.getForm().submit({
waitMsg: 'Adding player...',
success: function(form, action) {
addPlayerForm.getForm().reset();
addPlayerWindow.hide(document.body);
dorsetStore.reload();
soutwestStore.reload();
fiveStore.reload();
Ext.MessageBox.alert('Confirmation', 'Player has been added!');
},
failure: function(){
alert('EROOR');
}
});

}

}]
});

var addFixtureForm = new Ext.form.FormPanel({
frame: true,
width: 330,
waitMsgTarget:true,
url: 'add-fixture.php',
defaults: {width: 200},
items:[],
buttons:[{
text: 'Submit',
handler: function() {
addFixtureForm.getForm().submit({
waitMsg: 'Adding fixture...',
success: function(form, action) {
addFixtureForm.getForm().reset();
fixtureStore.reload();
Ext.MessageBox.alert('Confirmation', 'Fixture has been added!');
},
failure: function(){
alert('EROOR');
}
});

}

}]
});


//ADD PLAYER WINDOW

var addPlayerWindow = new Ext.Window(
{
title: 'Add New Player',
collapsible: true,
layout: 'fit',
height: 152,
items: addPlayerForm,
closeAction:'hide'
});

//DISPLAY ADD PLAYER FORM

var displayPlayerForm = function()
{
addPlayerWindow.show(true);
}

//DELETE PLAYERS

function deletePlayerDorset2(btn)
{
if(btn == "yes") {
var selections = dorsetGrid.selModel.getSelections();
var players = [];
for(i=0;i<dorsetGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result = eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
dorsetStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerDorset = function()
{
if(dorsetGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(dorsetGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerDorset2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+dorsetGrid.selModel.getCount()+' players?',deletePlayerDorset2);
}

}

function deletePlayerSouthWest2(btn)
{
if(btn == "yes") {
var selections = southwestGrid.selModel.getSelections();
var players = [];
for(i=0;i<southwestGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
soutwestStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerSouthWest = function()
{
if(southwestGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(southwestGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerSouthWest2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+southwestGrid.selModel.getCount()+' players?',deletePlayerSouthWest2);
}
}

function deletePlayerFive2(btn)
{
if(btn == "yes") {
var selections = fiveGrid.selModel.getSelections();
var players = [];
for(i=0;i<fiveGrid.selModel.getCount();i++)
{
players.push(selections.json.id);
}
var encoded_array = Ext.encode(players);
Ext.Ajax.request({
waitMsg: 'Please Wait...',
url: 'delete-players.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1: [I]// Success : simply reload
fiveStore.reload();
Ext.MessageBox.alert('Confirmation','Player/s Deleted');
break;
default:
Ext.MessageBox.alert('Warning','Could not delete the entire selection.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
}

var deletePlayerFive = function()
{
if(fiveGrid.selModel.getCount() < 1)
{
Ext.MessageBox.alert('Try Again','Please Select a Player Before You Can Delete!');
}
else if(fiveGrid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete that player?',deletePlayerFive2);
}
else
{
Ext.MessageBox.confirm('Confirmation','Are you sure you want to delete '+fiveGrid.selModel.getCount()+' players?',deletePlayerFive2);
}

}

//TOP GENERAL TOOLBAR

var generalToolbar = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerDorset}]
});
var generalToolbar2 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerSouthWest}]
});
var generalToolbar3 = new Ext.Toolbar({
items: ['->',{text: 'Add Player', handler: displayPlayerForm},'-',
{text: 'Delete Player', handler: deletePlayerFive}]
});

//BOTTOM PAGING TOOLBAR

var pagingDorset = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: dorsetStore,
id: 'pagingDorset',
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSouthWest = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: soutwestStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingFive = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: fiveStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

var pagingSearch = new Ext.PagingToolbar({
pageSize: defaultPagesize,
store: searchStore,
displayInfo: true,
displayMsg: 'Total {2} Results Found. Current Shows {0} - {1}',
emptyMsg: "No Results to Display"
});

//ADD & EDIT FIXCTURE PANELS

var addFixturePanel = new Ext.Panel({
id: 'addFixturePanel',
plain: true,
items: addFixtureForm,
border: false
});

var editFixturePanel = new Ext.Panel({
id: 'editFixturePanel',
plain: true,
items: editFixtureForm,
border: false
});

//TAB MENU

var tabMenu = new Ext.TabPanel( {
defaults: {autoScroll: true},
plain: true,
activeTab: 1,
border: false,
autoDestroy: false,
style: {
marginTop: '5px'
},
title: 'Players',
id: 'tabMenu'
});

var tabMenuPanel = new Ext.Panel({
id: 'tabMenuPanel',
plain: true,
items: tabMenu,
border: false
});

function populateForm(idnum)
{
editForm.getForm().load({
url: 'get-players-edit.php',
params: {id:idnum}
});
}

function populateForm2(idnum)
{
editFixtureForm.getForm().load({
url: 'get-fixtures-edit.php',
params: {id:idnum}
});
}

// GRIDS

var dorsetGrid = new Ext.grid.GridPanel({
store: dorsetStore,
colModel: dorsetCol,
height: 288,
title: 'First Team',
id: 'dorsetGrid',
tbar: generalToolbar,
bbar: pagingDorset,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})
});

var southwestGrid = new Ext.grid.GridPanel({
store: soutwestStore,
colModel: dorsetCol,
title: 'Reserve Team',
height: 288,
id: 'southwestGrid',
tbar: generalToolbar2,
bbar: pagingSouthWest,
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var fiveGrid = new Ext.grid.GridPanel({
store: fiveStore,
colModel: dorsetCol,
title: 'Youth Team',
height: 288,
tbar: generalToolbar3,
bbar: pagingFive,
id: 'fiveGrid',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var fixtureGrid = new Ext.grid.GridPanel({
store: fixtureStore,
colModel: fixtureCol,
title: 'Fixtures',
id: 'fixtureGrid',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm2(id);
}
}
})

});

var clubStats = new Ext.Panel({
width: 325,
height: 173,
contentEl: 'club_stats',
title: 'Club Stats'
});


var playerPanel = new Ext.Panel({
layout: 'border',
border: false,
id: 'playerPanel',
items: [{
region: 'center',
items: tabMenuPanel,
autoHeight: true
},{
region: 'east',
items: [editForm,clubStats],
width: 325,
border: false,
autoHeight: true,
id: 'editFormPanel',
split: true
}]

});

var fixturePanel = new Ext.Panel({
layout: 'border',
border: false,
id: 'fixturePanel',
items: [{
region: 'center',
items: fixtureGrid,
autoHeight: true
},{
region: 'east',
items: [addFixturePanel, editFixturePanel],
width: 325,
border: false,
autoHeight: true,
split: true
}]

});

var mainPanel = new Ext.Panel({
layout: 'fit',
border: false,
id: 'mainPanel',
items: [playerPanel, fixturePanel],
tbar: {
items: [{
xtype: 'button',
id: 'playersTab',
text: 'Players',
toggleGroup: 'pages',
pressed: true,
handler: function(f,e){
playerPanel.show();
fixturePanel.hide(true);
}
},'-',{
xtype: 'button',
id: 'fixturesTab',
text: 'Fixtures' ,
toggleGroup: 'pages',
handler: function(f,e){
playerPanel.hide(true);
fixturePanel.show();
}
},'-',{
xtype: 'button',
id: 'resultsTab',
text: 'Results',
toggleGroup: 'pages'
},'-',{
xtype: 'button',
id: 'sponsorsTab',
text: 'Sponsors',
toggleGroup: 'pages'
},'-',{
xtype: 'button',
id: 'newsTab',
text: 'News',
toggleGroup: 'pages'
},'->',
{
xtype: 'textfield',
name: 'searchterm',
id: 'searci'
},'-',{
xtype: 'button',
text: 'Search',
handler: function(){
if(Ext.get('searci').getValue() != "") {
var search = Ext.getCmp('searci');
var searchterm = search.getValue();
searchStore.baseParams = {st: searchterm};
searchStore.load({ params:{start: 0, limit: defaultPagesize}});
var searchtab = tabMenu.add('searchResultsTab');
tabMenu.setActiveTab(searchtab);
tabMenu.doLayout();
Ext.getCmp('searci').reset(true);
}
else
{
Ext.MessageBox.alert('Notification','Please Enter a search term');
}
}
}]
}

});


var searchResultsTab = new Ext.grid.GridPanel({
title: 'Search Results',
id: 'searchResultsTab',
closable: true,
store: searchStore,
colModel: dorsetCol,
height: 288,
bbar: pagingSearch,
closeAction:'hide',
sm: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, index, record){
var id = record.get('id');
populateForm(id);
}
}
})

});

var mainView = new Ext.Viewport({
layout: 'fit',
items: [mainPanel]
});

//ADD GRIDS TO TAB MENU

tabMenu.add('dorsetGrid');
tabMenu.add('southwestGrid');
tabMenu.add('fiveGrid');
tabMenu.setActiveTab('dorsetGrid');
tabMenu.doLayout();

});



when i remove the previous panel, it show up fine, but as soon as i leave both on there I cannot get it to work at all. I really dont understand this and would really appreciate finding out why it is caused.

P.s. I havent managed to sort out my issue from my previous post either

lukefowell89
8 Nov 2010, 8:35 AM
Would it be possible to get any solutions? I really need to learn this stuff for a project that I am being given real soon!

Thanks!

lukefowell89
15 Nov 2010, 3:52 AM
Just a quick question,

I have a store and I would like to be able to search through it. I know how to do this if I were loading the store then handling the request from a serverside script, but this store isnt coming from a database.

I have got a search bar and search button. The store is already there, how do I go about searching for 1 field in the store (which is the name) and then returning only those which contain or match it?

Really stuck on this, please any help will be much appreciated!

Heres the Grid (with search bar):

Ext.ux.CanvasFormulasGrid = Ext.extend(Ext.ibc.GridPanel, {
constructor: function(config) {
config = Ext.apply({

columns: [
{id:'name',header: 'Name', sortable: true, dataIndex: 'item', renderer:formulaCell}
],
stripeRows : true,
hideHeaders : true,
cls : "grid-vscroll",
contextMenu : new canvasFormulasGridContextMenu(),
tbar : [{
text: 'New Formula',
xtype: 'ShowOverlayButton'
}],
bbar : [{
xtype: 'textfield',
id: 'searchFormulaField',
name: 'formulaSearch'
},{
text: 'Search',
xtype:'button'
}],
listeners: {
dblclick : function(e){
//console.log(this);
this.editFormula();
}
},
viewConfig: {
forceFit:true
}

}, config);

Ext.ux.CanvasFormulasGrid.superclass.constructor.call(this, config);
},

initComponent : function() {
Ext.ux.CanvasFormulasGrid.superclass.initComponent.apply(this, arguments);

//notificationCenter.addObserver(D_FORMULA_CLEAR_SELECTION,"clearSelections",this);
notificationCenter.addObserver(D_CANVAS_SELECT_COMPONENT,"selectComponent",this);
notificationCenter.addObserver(D_CANVAS_DESELECT_ALL_COMPONENTS,"clearSelections",this);
},

onRender: function(grid) {
Ext.ux.CanvasFormulasGrid.superclass.onRender.apply(this, arguments);

this.dragZone = new Ext.dd.DragZone(this.getEl(), {
grid : this,

// On receipt of a mousedown event, see if it is within a draggable element.
// Return a drag data object if so. The data object can contain arbitrary application
// data, but it should also contain a DOM element in the ddel property to provide
// a proxy to drag.
getDragData : function(e) {
var target = e.getTarget();
var sourceEl = e.getTarget('td.x-grid3-cell', 10);
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();

return grid.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
record: this.grid.getSelectionModel().getSelected()
}
}
},

// Provide coordinates for the proxy to slide back to on failed drag.
// This is the original XY coordinates of the draggable element.
getRepairXY: function() {
return this.dragData.repairXY;
}
});

},

editFormula : function() {
notificationCenter.postNotification(D_FORMULA_EDIT, this.selectedRecord, true);
},

deleteFormula : function () {
this.store.remove(this.selectedRecord);

var formulaBuilder = Ext.getCmp('formulaBuilder');
formulaBuilder.hide();
},

clearSelections : function (){
this.getSelectionModel().clearSelections();
},

selectComponent : function(component){
if (component.type == "FormulaField") {
this.getSelectionModel().selectRow(this.store.indexOfId(component.record.id));
}
}

});

Ext.reg('canvasFormulasGrid', Ext.ux.CanvasFormulasGrid);


And here is the store:


Ext.ux.FormulaStore = Ext.extend(Ext.data.Store, {
_nextID:0,

constructor: function (config) {

this.rec = Ext.data.Record.create(['name','canvasItem','componentStore','calculatedValue']);

this.rec.prototype.addComponent = function(type, operator, data) {
this.data.componentStore.addComponent(type, operator, data);
};

this.rec.prototype.calculatedValue = function() {
return this.data.componentStore.calculatedValue();
};

this.rec.prototype.getConfig = function() {
//console.log(this);
return {
id : this.get('id'),
componentStore : this.data.componentStore.getConfig(),
name : this.get('name')
};
};

Ext.ux.FormulaStore.superclass.constructor.call(this, Ext.apply({
},config));

notificationCenter.addObserver(D_CANVAS_FORMULAS_LOAD,"load",this);
notificationCenter.addObserver(D_CANVAS_POST_LOAD,"postload",this);
},

initComponent : function() {
Ext.ux.FormulaStore.superclass.initComponent.apply(this, arguments);

},

addFormula: function(name) {
//var item = new Ext.ux.CanvasItemFormulaField();
var id = this.nextID();
var newrec = new this.rec({
id: id,
calculatedValue: 0,
type: 'FormulaField',
name: name,
icon: 'formula-field.png',
//canvasItem: item,
componentStore: new Ext.ux.FormulaComponentsStore({
id: id + '-componentStore',
FormulaStore:this,
listeners : {
valuechanged : function(componentStore, newValue, oldValue) {
this.FormulaRecord.set('calculatedValue', newValue);
}
}
})
}, id);
newrec.get('componentStore').FormulaRecord = newrec;
this.add(newrec);
notificationCenter.postNotification(D_FORMULA_EDIT, newrec, true);
//item.select();
return newrec;
},

nextID : function() {
return (this.id || this.storeId) + '-' + this._nextID++;
},

getConfig: function() {
var records = [];
this.each(function(record){
//console.log(record);
records.push(record.getConfig());
});
return {
records : records,
nextID : this._nextID
};
},

load : function(config) {
this.removeAll();

this._nextID = config.nextID;

Ext.each(config.records,function(record){

var newrec = new this.rec({
id: record.id,
calculatedValue: 0,
type: 'FormulaField',
name: record.name,
icon: 'formula-field.png',
//canvasItem: item,
componentStore: new Ext.ux.FormulaComponentsStore({
id: record.id + '-componentStore',
FormulaStore:this,
listeners : {
valuechanged : function(componentStore, newValue, oldValue) {
this.FormulaRecord.set('calculatedValue', newValue);
}
}
})
}, record.id);

newrec.get('componentStore').FormulaRecord = newrec;
newrec.get('componentStore').load(record.componentStore);

this.add(newrec);

},this);
},

postload : function() {

this.each(function(record){
record.get('componentStore').postload();
});

}


});
Ext.reg('FormulaStore', Ext.ux.FormulaStore);