Extjs ポータルの例に取り組んでおり、 GitHub の extjs4-mvc-portalから例をダウンロードしました。
Tomcat を使用して Eclipse に正常に統合し、XML グリッド パネルを追加しました。この Live Search Grid Example のような「livesearchpanel」を追加したいと考えています。
この例は、ストア、ポートレットなどのさまざまなセクションに分割されており、livesearchpanel を統合するために CSS ファイルと JavaScript ファイルをどこに追加すればよいか混乱しています。
ポートレットセクションに追加すると、次のエラーが発生しました
リソースの読み込みに失敗しました: サーバーは 404 (見つかりません) のステータスで応答しました
Ext.define('ExtMVC.view.portlet.livegrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.livegrid',
height: 300,
/**
* Custom function used for column renderer
* @param {Object} val
*/
change: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
/**
* Custom function used for column renderer
* @param {Object} val
*/
pctChange: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},
initComponent: function(){
var store = Ext.create('ExtMVC.store.lives');
Ext.apply(this, {
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change',
// renderer: change
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange',
//renderer: pctChange
},
{
xtype : 'datecolumn',
text : 'Last Updated',
width : 85,
sortable : true,
dataIndex: 'lastChange'
}]
});
this.callParent(arguments);
}
});
extjs/src/grid/ の src セクションで EXT.ux.LiveSearchGridPanel.js を試しました extend: 'Ext.grid.LiveSearchGridPanel',。「extend: 'Ext.grid.Ext.ux.LiveSearchGridPanel」も変更します。