PDA

View Full Version : How to display a checkbox in a combobox within an XTemplate



icarey
11 Mar 2011, 1:46 AM
I would like to display a checkbox either checked of unchecked based upon the a combobox store value

My present template for the ComboBox as a starting point
var DrugTPL = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item"><input type="checkbox" name="drugcheckbox value="checked" /> {DrugName}</div>',
'</tpl>'
);

I am new at XTemplate and am unable to figure out how to do an IF ELSE statement in the template.

The combobox store:
// create the data store for the Drug combo box
var drugstore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['DrugID', 'DrugName', 'AuthRequired'],
root: 'drugrows'
}),
proxy: new Ext.data.HttpProxy({
url: 'medlogdrugcombo.php'
}),
autoLoad: true,
remoteSort : true,
autoDestroy: true
});

The AuthRequied is a boolean value of 1 and 0 and this is the record I want to use for the condition.
IF AuthRequied is 1 then check the box next to the DrugName else display an unchecked checkbox.

How may this be achieve thanks.

steffenk
11 Mar 2011, 2:46 AM
take a look:
http://lovcombo.extjs.eu/

icarey
11 Mar 2011, 3:13 AM
yes i have looked at lovcombo but it does not do what i am looking for.
I am using SuperBoxSelect as it does multiselect and displays the way I want. If I can get it to display a checked box next to each item in the list depending upon the value of AuthRequired then it will be perfect

Thanks,
Ivan

icarey
11 Mar 2011, 11:40 PM
After more research I managed to code as I needed the list to look like

var DrugTPL = new Ext.XTemplate(
//Itterate through the combobox store and check the checkbox in the list if the Authrequired is 1
'<tpl for=".">',
'<div class="x-combo-list-item">',
'<tpl for="AuthRequired">',
'<tpl if="this.isAuth1(values)">',
'<input type="checkbox" name="drugcheckbox value="checked" />',
'</tpl>', //if="this.isAuth1(values)"

'<tpl if="this.isAuth2(values)">',
'<input type="checkbox" name="drugcheckbox value="unchecked" />',
'</tpl>', //if="this.isAuth2(values)"

'</tpl>', //for="AuthRequired"
' {DrugName}',
'</div>',
'</tpl>', //for="."
{
isAuth1 : function(Auth) {
return Auth == 1;
}
},
{
isAuth2 : function(Auth) {
return Auth == 0;
}
}
);