PDA

View Full Version : How can i apply CSS



Selvam packiam
11 Sep 2008, 9:37 PM
Dear All,
I created a html with ext controls.
how can i apply the ext css to each controls..
Like button,combo,form,grid


User.js
var store;
var user_id_row;

//grid

function onLoadActions()
{
Ext.onReady(function(){
//User Label
new Ext.form.Label
(
{
renderTo:'lblUserHeader',
text: 'User Administration'
}
);
//Select Label
new Ext.form.Label
(
{
renderTo:'lblSelect',
text: 'Select'
}
);
/*******combo1 load using xml starts*****************/
new Ext.form.ComboBox
({
//id: 'ptype',
//name: 'ptype',
renderTo:'cboColNames',
mode: 'local',
store: new Ext.data.Store
({

proxy : new Ext.data.HttpProxy
({
url : 'test.xml'
}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader
({
record: 'row', id: 'id'
}, [
{name: 'id'},
{name: 'title'}
])

}),
triggerAction : 'all',
displayField: 'title',
valueField: 'id',
editable: false,
listeners: {

'render' : {
fn: function() {
this.store.load();
}
}
}

});
/*function OnComboValChange (Ext.form.Field this, Mixed newValue, Mixed oldValue)
{
alert("newValue" +newValue);
}*/
/*******combo1 load using xml ends*****************/

//Criterian1 Label
new Ext.form.Label
(
{
renderTo:'lblCriterion',
text: 'Criterian'
}
);


//Criterian 1 Textfield

new Ext.form.TextField
(
{

renderTo :'txtCriterion1',
width:300,
emptyText: '%'
//handler : 'cmdSave_onClick()'

}


);
// Cbo operator1


/*******combo2 manual starts*****************/
/*
ComboOper = [ ['Select'],['AND'],['OR']];


// simple array store
var store_Op = new Ext.data.SimpleStore({
fields: ['Operators'],
data : ComboOper
});

var combo = new Ext.form.ComboBox
(
{
tpl: '<tpl for="."><div ext:qtip="{Operators}" class="x-combo-list-item">{Operators}</div></tpl>', // Tool Tip
store: store_Op, //The data source to which this combo is bound
displayField:'Operators', // Underlying Data foeld to bind to this combobox
typeAhead: false,
mode: 'local', // Loads the local data in to the combo, default is "remote" which loads from Server
emptyText:'Select', // On load this will be displayed in the combo
renderTo: 'cboOperators' , // For Input Type in HTML
editable: true , // Prevent the user from type the value in the combo itself
width:155,
triggerAction: 'all',
inputType :'text'
}
); */
/*******combo2 manual ends*****************/
/*******combo12 load using xml starts*****************/
new Ext.form.ComboBox
({
//id: 'ptype',
//name: 'ptype',
renderTo:'cboOperators',
mode: 'local',
store: new Ext.data.Store
({

proxy : new Ext.data.HttpProxy
({
url : 'combo2.xml'
}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader
({
record: 'row', id: 'id'
}, [
{name: 'id'},
{name: 'title'}
])

}),
triggerAction : 'all',
displayField: 'title',
valueField: 'id',
editable: false,
listeners: {
'render' : {
fn: function() {
this.store.load();
}
}
}

});
/*******combo2 load using xml ends*****************/

//Get Button
new Ext.Button
(

{

renderTo :'cmdGet',
text :'Get',
width:100
//handler : 'cmdSave_onClick()'

}


);
//Row add Textfield

new Ext.form.TextField
(

{

renderTo :'txtNumber',
width:30
//handler : 'cmdSave_onClick()'

}


);

// Rows Label

new Ext.form.Label
(
{
renderTo:'lblNumberRow',
text: 'Rows'
}
);





// Grid
/****************************** Grid Starts ***********************************/
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel(
{
header: "ALL",
dataIndex: 'All',
width:30
});

// custom column plugin example

/*var checkColumn = new Ext.grid.CheckColumn({
header: "ALL",
dataIndex: 'All',
width:30
});



// For Disable Check box
var checkDisableColumn = new Ext.grid.CheckColumn({
header: "Disable account",
dataIndex: 'ACCOUNT_DISABLED_YN',
width: 90
}); */



// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([
//checkColumn,
sm,
{
id:'USER_ID',
header: "User ID",
dataIndex: 'USER_ID',
width: 70
},
{
header: "User name",
dataIndex: 'USER_NAME',
width: 100,
align: 'left',


editor: new fm.TextField({
allowBlank: false


})
},
{
header: "Password",
dataIndex: 'PASSWORD',
width: 70,
align: 'left',
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Retype password",
dataIndex: 'RETYPE_PASSWORD',
width: 100,
editor: new fm.TextField({
allowBlank: false
})
},

{
header: "Email address",
dataIndex: 'EMAIL_ADDRESS',
width: 150,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Language",
dataIndex: 'LANGUAGE',
width: 100,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Roles",
dataIndex: 'ROLES',
width:50,
style:'background-image:url(Search.gif)'

},
{
header: "SMS address",
dataIndex: 'SMS_ADDRESS',
width: 150,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Domain account",
dataIndex: 'DOMAIN_ACCOUNT',
width: 100,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Photo",
dataIndex: 'USER_PHOTO_FILE',
width: 50,
editor: new fm.TextField({
allowBlank: false
})
},
//checkDisableColumn,
{
header: "OU",
dataIndex: 'OU',
width: 50,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Partner Code",
dataIndex: 'PART_CODE',
width: 90
},
{
header: "Mode Flag",
dataIndex: 'MODE_FLAG',
hidden :'true'
}

]);

// by default columns are sortable
cm.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'All', type: 'bool'},
{name: 'USER_ID', type: 'string'}, // automatic date conversions
{name: 'USER_NAME',type: 'string'},
{name: 'PASSWORD', type: 'string'},
{name: 'RETYPE_PASSWORD',type: 'string' },
{name: 'EMAIL_ADDRESS',type: 'string'},
{name: 'LANGUAGE',type: 'string'},
{name: 'ROLES',type: 'string'},
{name: 'SMS_ADDRESS',type: 'string'},
{name: 'DOMAIN_ACCOUNT',type: 'string'},
{name: 'USER_PHOTO_FILE',type: 'string'},
// {name: 'ACCOUNT_DISABLED_YN',type: 'string'},
{name: 'OU',type: 'string'},
{name: 'PART_CODE',type: 'string'},
{name: 'MODE_FLAG',type: 'string'}
]);

// create the Data Store
store = new Ext.data.Store({

// url: 'User_Input.xml',

reader: new Ext.data.XmlReader({

record: 'ROW'
}, Plant),

sortInfo:{field:'USER_ID', direction:'ASC'}
});

// create the editor grid
var grid = new Ext.grid.EditorGridPanel(
{
store: store,
cm: cm,
sm: sm,
renderTo: 'editor-grid',
width:1200,
height:500,
buttonAlign:'center',
frame:true,
// autoExpandColumn:'USER_ID',
//title:'Edit Plants?',
// plugins:checkColumn,
clicksToEdit:1,
listeners: {
cellclick: onclickhandler,
afteredit: onAfterEditHandler
},
buttons:
[
{
text: 'Save',
handler: function()
{
//report.close();
cmdSave_onClick();
}

},
{
text: 'Cancel'
}
]
}
);

store.loadData(diHariXML);


//Grid
});
// LISTENER

function onclickhandler(grid, rowIndex, columnIndex, e)
{

var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
var data = record.get(fieldName);
user_id_row = record.get("USER_ID");
gridValueChange(diUserXml,rowIndex+1);
}

function onAfterEditHandler(e)
{
var intLength;
var intIndex;
gridValueChange(diUserXml,e.row+1);
intLength = diUserXml.selectNodes("RECORDSET/ROW").length;

for(intIndex=0;intIndex < intLength;intIndex++)
{
with(diUserXml.documentElement.childNodes(intIndex))
{
if(trim(selectSingleNode("USER_ID").text) == user_id_row)
{
selectSingleNode(e.field).text = e.value;

}

}
}


}

/****************************** Grid Ends ***********************************/
}

/****************************** Grid GET Starts ***********************************/
function getgrid()
{

store.loadData(diUserXml,"true");
}

/****************************** Grid GET Ends ***********************************/
/*
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};


Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},

onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
}

}; */





Html page
<HTML>
<HEAD>
<!--<LINK id="lnkStyleSheet" rel="stylesheet" type="text/css">-->

<TITLE></TITLE>

<SCRIPT src="../Common/dw_toolscommon.js" language="javascript"></SCRIPT>
<SCRIPT src="../Common/dwServiceMethodConst.js"></SCRIPT>
<!-- <SCRIPT src="../JavaScript/User_definition.js"></SCRIPT> -->
<!-- Extjs Js and Supporting Files -->

<link rel="stylesheet" type="text/css" href="../Extjs/ext-all.css"/>
<script type="text/javascript" src="../Extjs/ext-base.js"></script>
<script type="text/javascript" src="../Extjs/ext-all.js"></script>
<script type="text/javascript" src="../JavaScript/user.js"></script>

<!-- Extjs Js and Supporting Files -->

</HEAD>
<!--<BODY scroll="no" topmargin="0" leftmargin="0" height='100%' width='100%' onload="setFocus();" tabIndex="-1"> -->
<BODY scroll="no" topmargin="0" leftmargin="0" height='100%' width='100%' tabIndex="-1" class ="ext-el-mask">
<BR/>
<TABLE cellspacing="0" cellpadding="0" width="100%" align="center" border="1">
<TR>
<!--<TD align="middle" class="SSCHeading"> -->
<TD align="middle">
<SPAN id="lblUserHeader" ></SPAN></TD>
</TR>
<TR>
<TD height="30%"></TD>
</TR>
</TABLE>

<!--<TABLE width="100%" cellpadding="0" cellspacing="0" border="0" align="center" datasrc="#diHeader"> -->
<TABLE width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<TR>
<TD height="20%">
<TABLE cellspacing="1" border="0" cellpadding="0" align="center" width="100%">
<!--<TR class="SSCHdrLblMandatory">-->
<TR>
<TD width="10%">&nbsp;
<!--<SPAN id="lblSelect" name="lblSelect"></SPAN></TD>-->
<SPAN id="lblSelect" name="lblSelect"></SPAN></TD>
<TD width="25%">
<!--<SELECT name="cboColNames" id="cboColNames" datafld="SELNAME"> </SELECT> -->
<span id="cboColNames"></span>
</TD>
<TD width="10%">&nbsp;
<SPAN id="lblCriterion" name="lblCriterion"></SPAN>
</TD>
<TD width="35%">
<!--<INPUT name="txtCriterion1" size="50" class="sscText" datafld="CRITERION_ONE"> -->
<Span id="txtCriterion1" > </span>
</TD>
<TD width="8%">
<!--<SELECT name="cboOperators" datafld="OPERATOR" onchange="showNextFilter( this )"></SELECT> -->
<span id="cboOperators"> </span>
</TD>
<TD width="12%" align="center">
<!--<INPUT type="button" id="cmdGet" name="cmdGet" class="SSCCmd" style="width: 75px" onclick="cmdGet_onclick();" onmouseover="changeColorToWhite(this);" onmouseout="changeColorToBlack(this);">-->
<span id="cmdGet" onclick="cmdGet_onclick();"> </span>
</TD>
</TR>
</TABLE>
</TABLE>

<BR>
<TABLE class="SSCBG" cellspacing="0" border="0" cellpadding="0" align="center" width="100%">
<TR>
<TD height="5px"></TD>
</TR>
<TR>
<TD>&nbsp;&nbsp;
<!--<INPUT id="txtNumber" maxlength="2" onKeyPress = "integer_onKeypress(event);" class="SSCTextBox" style="width: 35px" tabIndex='4'> -->
<span id="txtNumber"> </span>

&nbsp;<SPAN id="lblNumberRow"></SPAN>&nbsp;

<!--<IMG id="imgAdd" src="..\Images\Add.gif" alt='' align="absMiddle" onclick="imgAdd_onclick(diUserXml,diNewUserRecordXml)" tabIndex='4'> &nbsp;
<IMG id="imgDelete" src="..\Images\Delete.gif" alt='' align="absMiddle" onclick="imgDelete_onclick(diUserXml,diUserBackUpXml);"> -->

<IMG id="imgAdd" src="..\Images\Add.gif" alt='' align="absMiddle" tabIndex='4'> &nbsp;
<IMG id="imgDelete" src="..\.\Images\Delete.gif" alt='' align="absMiddle" >
</TR>
<TR>
<TD height="5px"></TD>
</TR>
</TABLE>


<TABLE>
<TR>
<TD>
<span id="editor-grid"></span>
</TD>
</TR>
</TABLE>


</BODY>
</HTML>
<SCRIPT>
onLoadActions();
</SCRIPT>

mabello
12 Sep 2008, 5:02 AM
Hi there.
If you want to create your own look and feel for ext, I'll suggest you to look in the extension forum and check out theme for ext; (BlackTheme is an example).
This is a "global" change of the look and feel; otherwise, you can use some properties of the cfg object of your components like cls, style, etc.
Check out the great API documentation for further info.
Hope this helsp