24 08 2007 Nils Hitze
Wer schonmal mit der ext JS Bibliothek gearbeitet hat, weiß, das Tool ist unglaublich mächtig. Gut dokumentiert, schwer zu verstehen, aber mächtig.
Das Lieblingseinstiegsbeispiel beinahe aller ist das Data Grid, bzw. die Ajax betriebene Variante.
So auch bei mir. Und ich bin gnadenlos auf die Fresse gefallen damit.
A) Schön zu wissen das man zum Betreiben des Beispiels ext-base, ext-all, ext-all.css sowie ext-yui-adapter und yui braucht.
Ein ganzer Riesenpacken von JS Libs sowie die richtige Includereihenfolge sind das Geheimniss.
Für dieses Problem gibt es eine INCLUDE_ORDER.txt im Rootverzeichniss von ext JS.
B) Erst lernen den Data Store und den XML Reader zu benutzen, die Zusatzparameter sind sehr lehrreich.
So zum Beispiel die Tatsache das HTML Linkdaten in XML Daten Entityencoded werden müssen um zu funktionieren.
Nagut, dass wissen viele, aber eben nicht jeder.
Ausserdem gibt Data Store nach dem vollständigen LADEN der Daten keinen Callback zurück, sondern knapp nach dem Success.
Für diesen Fall einen DataStore.on('load' ... Eventhandler initialisieren, der behebt das Problem mit der nachträglichen Manipulation der DOM Struktur.
z.B. Lightbox auf Links in per XML geladenen Daten, etc.
So, im Anschluss an soviel Gemecker noch meinen Quellcode, der zum Funktionieren aber besagte Bibliotheken braucht. Für das Debuggen benutzten wir wie immer Firebug und ich hoffe einige ext JS Anfänger haben jetzt einen ruhigeren Tag da sie sich nicht durch die Doku arbeiten müssen, sondern einfach mein Beispiel nehmen. Fragen zu dem Skript einfach stellen.
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'daten.xml'}),
reader: new Ext.data.XmlReader(
{ record: 'data',
totalRecords: 'total'},
[ {name: 'name'},
{name: 'description'},
{name: 'action'}]
)
});
var cm = new Ext.grid.ColumnModel([
{ header: "Name",
id: "name",
dataIndex: 'name'},
{ header: "Beschreibung",
width: '200',
dataIndex: 'description' },
{ header: "Aktionen",
width: '200',
dataIndex: 'action',
sortable: false}
]);
cm.defaultSortable = true;
// create the grid
var grid = new Ext.grid.Grid('adr', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false,
loadMask: false
});
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
function renderName(value, p, record){
return String.format('<b>{0}</b>{1}', value, record.data['company']);
}
function renderNamePlain(value){
return String.format('<b><i>{0}</i></b>', value);
}
function toggleDetails(btn, pressed){
cm.getColumnById('name').renderer = pressed ? renderName : renderNamePlain;
grid.getView().refresh();
}
// trigger the data store load
ds.load({params:{start:0, limit:2}} );
// on load of data, init lightwindow links
ds.on('load', hLightInit); Kategorien : Coding, ext JS, Shorttips
Trackbacks : Keine Trackbacks »
Trackbacks
Keine Trackbacks