Extjs_basic array grid example

Journey: 2015114_3

The HTML page code of basic array grid example is:

Html
《
Head
《
Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/
《
*
Title basic array grid example/Title

《! -- ** CSS ** --"
《! -- Base library --"
《
*
LINK rel = "stylesheet" type = "text/CSS" href = ".../resources/CSS/ext-all.css"/
《
*
Style type = text/CSS
/* Style rows on Mouseover */
X-grid3-row-over. x-grid3-cell-inner {
Font-weight: bold;
}

/* Style for the "buy" actioncolumn icon */
. X-action-col-cell IMG. Buy-Col {
Height: 16px;
Width: 16px;
Background-image: URL (.../../examples/shared/icons/fam/accept.png );
}

/* Style for the "alert" actioncolumn icon */
. X-action-col-cell IMG. Alert-Col {
Height: 16px;
Width: 16px;
Background-image: URL (.../../examples/shared/icons/fam/error.png );
}

/Style

《! -- ** JavaScript ** --"
《! -- Extjs Library: base/adapter --"
《
*
Script Type = "text/JavaScript" src = ".../adapter/EXT/ext-base.js"/script
《! -- Extjs Library: All widgets --"
《
*
Script Type = "text/JavaScript" src = ".../ext-all.js"/script
《! -- Page specific --"
《
*
Script Type = "text/JavaScript" src = "basicarraygrid. js"/script

/Head

《
Body
《
H1 stateful array grid example/H1 br/
《
H4 welcome to 23 devil's training camp/H4
《
Div id = "Grid-Example"/Div

/Body
/Html

 

JS Code:

/*
* Ext JS library 3.0.0
* For example, see SDK 3.3.0.
* Time: 2015114_3
*/
Ext. onready (function (){
// Initialization prompt
Ext. quicktips. INIT ();
// Status
Ext. state. Manager. setprovider (New Ext. state. cookieprovider ());

/** Data */
VaR mydata = [
['Datang beef unlimited company ', 71.72, 0.02,-0.03, '2017 am'],
['Datang human resources authority ', 29.01, 0.42, 1.47, '2017 am'],
['Datang Development Department ', 45.45,-0.73, 1.63, '2017 am']
];

/*
* Column Renderer function:
* Change column rendering function.
*/
Function Change (VAL ){
If (Val> 0) {// The value is greater than 0
Return '<span style = "color: green;">' + Val + '</span> ';
} Else if (Val <0) {// The value is smaller than 0
Return '<span style = "color: red;">' + Val + '</span> ';
}

Return val; // return directly if the value is 0.
};

/*
* Column Renderer function:
* Pctchange column rendering function.
*/
Function pctchange (VAL ){
If (Val> 0 ){
Return '<span style = "color: green;">' + Val + '% </span> ';
} Else if (Val <0 ){
Return '<span style = "color: red;">' + Val + '% </span> ';
}
Return val;
};

/** Data store */
VaR store = new Ext. Data. arraystore ({
Fields :[
{Name: 'company '},
{Name: 'price', type: 'float '},
{Name: 'change', type: 'float '},
{Name: 'pctchang', type: 'float '},
{Name: 'lastchang', type: 'date', dateformat: 'n'/j h: '}
]
});
Store. loaddata (mydata); // load local data

/** Create a grid */
VaR grid = new Ext. Grid. gridpanel ({
Title: 'basicarraygrid ',
Height: 250,
Width: 650,
Autoexpandcolumn: 'company', // column extension
Store: store,
Striperows: True,
// Config options for stateful Behavior
Stateful: True,
Stateid: 'grid ',
Columns :[
{
ID: 'company ',
Header: 'company ',
Width: 160,
Sortable: True,
Dataindex: 'company'
},
{
Header: 'price ',
Width: 75,
Sortable: True,
Renderer: 'usmoney ',
Dataindex: 'price'
},
{
Header: 'change ',
Width: 75,
Sortable: True,
Renderer: change,
Dataindex: 'change'
},
{
Header: '% change ',
Width: 75,
Sortable: True,
Renderer: pctchange,
Dataindex: 'pctchang'
},
{
Header: 'Last updated ',
Width: 85,
Sortable: True,
Renderer: Ext. util. format. daterenderer ('m/D/Y '),
Dataindex: 'lastchange'
},{
Header: 'pickup ',
Dataindex: 'change ',
Width: 30,
Align: 'center ',
Renderer: function (value ){
Return "<div> </div> ";
}
},{
Header: 'inventories ',
Dataindex: 'change ',
Width: 30,
Align: 'center ',
Renderer: function (value ){
If (value> 0 | value = 0)
{
Return "<div> </div> ";
} Else if (value <0)
{
Return "<div> </div> ";
}
}
}
/*,
{
Xtype: 'actioncolumn', // IOS 3.0.0 does not support actioncolumn, so it cannot be run.
Width: 50,
Items :[{
Icon: '../examples/shared/icons/fam/delete.gif', // use a URL in the icon config
Tooltip: 'stock stocks ',
Handler: function (grid, rowindex, colindex ){
VaR rec = store. getat (rowindex );
Alert ("example" + Rec. Get ('company '));
}
},{
Getclass: function (v, Meta, REC) {// or return a class from a function
If (Rec. Get ('change') <0 ){
This. items [1]. tooltip = 'do not buy! ';
Return 'alert-col ';
} Else {
This. items [1]. tooltip = 'buy stock ';
Return 'buy-col ';
}
},
Handler: function (grid, rowindex, colindex ){
VaR rec = store. getat (rowindex );
Alert ("buy" + Rec. Get ('company '));
}
}]
}*/
]
});
// Render the grid to the DIV
Grid. Render ('grid-example ');

Grid. On ({
Cellclick: function (grid, rowindex, colindex, e ){
If (E. gettarget (). classname. indexof ("deletebtnimg ")! =-1 ){
Ext. msg. Confirm ("confirmation box", "pick up? ", Function (BTN ){
If (BTN. tostring (). touppercase () = "yes ")
{
Alert ("Warm Reminder: Congratulations! Goods extracted! ");
}
});
};

If (E. gettarget (). classname. indexof ("addbtnimg ")! =-1 ){
Ext. msg. Confirm ("confirmation box", "inventory? ", Function (BTN ){
If (BTN. tostring (). touppercase () = "yes ")
{
Alert ("Warm Reminder: Congratulations! Inventory successful! ");
}
});
}

}
});

/** Grid listener */
/* This. getgrid (). On ({
Cellclick: function (G, R, C, E ){
If (E. gettarget (). classname. indexof ("Div class name ")! =-1 ){
MSG. Confirm ("are you sure you want to mark this record as completed? ", Function (BTN ){
If (BTN. tostring () = "yes "){
VaR record = G. getstore (). getat (R );
// Submit and save the data.
Appajax. Request ({
URL :{
URL: String. Format (ACOM. getuvaction ("modulename", "save"), record. Get ("ID ")),
Method: ACOM. getuvmethod ("modulename", "save ")
},
Params :{
"Model. sfwc": True // only the modified part is submitted.
},
Scope: This,
Success: function (data ){
G. refreshgrid ();
}
});
}
});
}
}
});*/
});