/plugins/sfExtjsThemePlugin/web/extjs/docs/output/Ext.form ::
937, When using a name/value combo, if the value passed to setValue is not found in the store, This function does NOT cause the select event to fire.
http://trac.symfony-project.org/browser/plugins/sfExtjsThemePlugin/web/extjs/docs/output/Ext.form.ComboBox.html?rev=5962HOME |
Ok, I have a piece of code (as shown below) which displays a list of rows in a grid panel.
I am having trouble with " this.bottomToolbar.pageSize = rowsPerPage; "
Error ->
this.bottomToolbar has no properties
How to fix this error?
TblListGrid = function(viewer, config) {
this.viewer = viewer;
Ext.apply(this, config);
this.reader = new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalcount',
id: 'TABLE_ID',
fields: [
{name: 'TABLE_NAME'}
, {name: 'TABLE_DESC'}
]
});
this.store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: Ext.URLLIST
}),
reader: this.reader,
pruneModifiedRecords:true,
remoteSort: false
});
function source_rule(val){
if (val > 0) {
return 'SourceA';
}
else {
return ' XXX Amateur Blog Verzeichnis::
my code is here, im get error of ext not define /* * Ext JS Library 2.2 . I want when i clicked close.gif, the window fire event win.hide();
http://www.erotikweblogs.com/view.php?feed=1034HOME |
SfR Fresh: [ktdms-src-oss-3.5.4a.tgz] Member Ext.form.ComboBox ::
When using a name/value combo, if the value passed to setValue is not found in the store, .. This function does NOT cause the select event to fire.
http://www.sfr-fresh.com/unix/privat/ktdms-src-oss-3.5.4a.tgz:a/kt-dms-oss/thirdpartyjs/extjs/docs/output/Ext.form.ComboBox.htmlHOME |
SourceB';
}
}
function tableDtls(val, p, record){
return String.format('{0}
{1}', record.data.TABLE_NAME, record.data.TABLE_DESC);
}
Ext.pageSizes = [['5'], ['10']];
var pageSizeStore = new Ext.data.SimpleStore({
fields: ['size'],
data: Ext.pageSizes
});
var pageSizeCombo = new Ext.form.ComboBox({
displayField:'size',
fieldLabel: 'rows/page',
mode: 'local',
store: pageSizeStore,
selectOnFocus:true,
typeAhead: true,
triggerAction: 'all',
valueField: 'size',
value: Ext.pageSizes[0],
width: 45
});
java技术- BlogJava::
bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, .. fireEvent('checkchange', this.node, true); } }); // render the tree
http://www.blogjava.net/fuhoujun/HOME |
ksgimi - JavaEye技术网站::
fireEvent("load", this, null, arg); callback.call(scope, result, arg, true); handler : doDel }], bbar:new Ext.PagingToolbar({ pageSize: 2, store: ds,
http://ksgimi.javaeye.com/blog/forum?show_full=trueHOME |
this.bbar = new Ext.PagingToolbar({
id: 'lstPageTB',
scope: this,
pageSize: '5',
store: this.store,
displayInfo: true,
displayMsg: 'Displaying rows {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:['-', 'rows/page ', pageSizeCombo]
});
pageSizeCombo.on("select", function(){
rowsPerPage = parseInt(pageSizeCombo.getValue(), 10);
console.log ('rowsPerPage = "' + rowsPerPage + '"');
this.bottomToolbar.pageSize = rowsPerPage;
this.store.load({params:{start:0, limit: rowsPerPage }});
});
TblListGrid.superclass.constructor.call(this, {
split:true,
width: 420,
minSize: 275,
maxSize: 720,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
rootVisible:false,
lines:false,
autoScroll:true,
collapseFirst:false,
region: 'west',
store: this.store,
id: 'TblList-Grid',
loadMask: {msg:'Loading data...'},
autoScroll: true,
columns: [
new xg.RowNumberer(),
{header: "TABLE NAME", width: 250, sortable: true, renderer: tableDtls},
{header: "TABLE DESC", width: 110, sortable: true, dataIndex: 'TABLE_DESC'}
],
sm: new Ext.grid.RowSelectionModel(),
tbar: [{
text: 'Refresh',
iconCls: 'Refresh',
scope: this,
handler: this.fnRefreshList,
tooltip: 'Click to refresh below data.'
}],
viewConfig: {
forceFit:false,
enableRowBody:true,
showPreview:true
},
listeners: {
render: function(g){
g.on("beforetooltipshow", function(grid, row, col){
if (row) {
cnvgrid.tooltip.body.update(cnvgrid.getStore().get At(row).get("ERRMSG"));
}
});
}
celldblclick: function(o, r, c, e){
var dataIndex = o.getColumnModel().getDataIndex(c);
var record = o.getStore().getAt(r);
if ((record.get("GRANT_READ") == "1")
(record.get("GRANT_UPDATE") == "1")
(record.get("GRANT_DELETE") == "1")) {
this.fireEvent('rowselected', record);
} else {
o.getSelectionModel().clearSelections();
o.getStore().getAt(r).set("ERRMSG", "Permission denied: You don't have access to either Read, Update or Delete this table's contents.");
var rowIdx = cnvgrid.getStore().indexOf(record);
var gridTr = cnvgrid.getView().getRow(rowIdx);
var gridEl = Ext.fly(gridTr);
gridEl.highlight("ff0000", {
attr: 'background-color',
endColor: "FFBBBB",
duration: 2
});
}
}
},
iconCls: 'icon-grid',
stripeRows: true,
title: 'TABLE LIST'
});
};
Ext.extend(TblListGrid, Ext.grid.GridPanel, {
fnRefreshList: function(){
this.fireEvent('refreshed');
this.store.reload();
this.getSelectionModel().clearSelections();
}
});
Once I've written enable/disable methods for paging toolbar:
// additional methods of paging toolbar
// {{{
Ext.override(Ext.PagingToolbar, {
// enable toolbar elements
enable: function(disable) {
// setup variables
disable = disable ? true : false;
var d = this.getPageData();
var ap = d.activePage;
var ps = d.pages;
// mask/unmask
if(disable) {
this.getEl().mask();
}
else {
this.getEl().unmask();
}
this.first.setDisabled(!disable ? ap === 1 : disable);
this.prev.setDisabled(!disable ? ap === 1 : disable);
this.next.setDisabled(!disable ? ap === ps : disable);
this.last.setDisabled(!disable ? ap === ps : disable);
this.field.dom.disabled = disable;
this.loading.disabled = disable;
this.loading.el.disabled = disable;
// an optional filter field
if(this.filter) {
this.filter.dom.disabled = disable;
}
if(this.plugins instanceof Array) {
Ext.each(this.plugins, function(p) {
p.setDisabled(disable);
});
}
}
// disable toolbar components
, disable: function() {
this.enable(true);
}
, reload: function() {
this.store.load({params: {start: this.cursor, limit: this.pageSize}});
}
});
Yes, and could you please use ext-all-debug?
K... and here is the stack trace -
this.bottomToolbar has no properties
(no name)()ltblgridlist.js (line 101)
fire()ext-all-debug.js (line 1504)
fireEvent()ext-all-debug.js (line 1201)
onSelect(Object id=1002 data=Object json=[1] store=Object fields=[1], 1)ext-all-debug.js (line 26927)
onViewClick(Object initialConfig=Object tpl=Object singleSelect=true)ext-all-debug.js (line 27001)
fire()ext-all-debug.js (line 1504)
fireEvent()ext-all-debug.js (line 1201)
onClick(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 17510)
h(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 1629)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] this.bottomToolbar.pageSize = rowsPerPage;
Yes, and could you please use ext-all-debug?
Check out your handler on line 101 which is responding to an event called select.
pageSizeCombo.on("select", function(){
rowsPerPage = parseInt(pageSizeCombo.getValue(), 10);
console.log ('rowsPerPage = "' + rowsPerPage + '"');
this.bottomToolbar.pageSize = rowsPerPage;
this.store.load({params:{start:0, limit: rowsPerPage }});
});
Set a breakpoint in your handler, inspect the this variable. What is it contents? Does it have a bottomToolbar property?
Now that you see that it does not, you will want to adjust scope for this function. Add a 3rd argument to override scope to this.
pageSizeCombo.on("select", function(){
rowsPerPage = parseInt(pageSizeCombo.getValue(), 10);
console.log ('rowsPerPage = "' + rowsPerPage + '"');
this.bottomToolbar.pageSize = rowsPerPage;
this.store.load({params:{start:0, limit: rowsPerPage }});
}, this);
Aaah.. Now I see what you mean.
K, "this" is pointing to "pageSizeCombo" object.
this.bbar = new Ext.PagingToolbar({
id: 'lstPageTB',
scope: this,
pageSize: '5',
store: this.store,
displayInfo: true,
displayMsg: 'Displaying rows {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:['-', 'rows/page ', pageSizeCombo]
});
Now, since pageSizeCombo is registered as an item in "this.bbar = new Ext.PagingToolbar",
this in "this.bottomToolbar.pageSize" doesn't work as it doesn't have bottomToolbar property, the grid does!
How does one do something equivalent of setting pageSize property for the pagingToolbar ?
How do we access the grid directly? I have used "scope" to do this for the other controls, but couldn't get it to work here.
Any ideas?
You don't need to be running the site locally to set a breakpoint in Firebug. You can do this with any site as the code is running on the client side.
bump...
Could you post a stack trace from firebug?
Bump...
Your last semi-meaningful post says "doesn't work". Doesn't work isn't helpful from my seat. Can you be more specific in your description what isn't working, you expect X but Y is happening or isn't happening, etc?
Well, I went thru the two tutorials.. and tried what I thought would work. Applying scope to all the objects created for pagesize stuff - specified scope for the pagesize store and for bbar but it still doesn't work.
Would appreciate any help. Thanks.
Could you post a stack trace from firebug?
Hello aconran, did you mean this ?
this.bottomToolbar has no properties
(no name)()ltblgridlist.js (line 101)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
initComponent(Object id=1002 data=Object json=[1] store=Object fields=[1], 1)ext-all.js (line 129)
initComponent(Object initialConfig=Object tpl=Object singleSelect=true)ext-all.js (line 129)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
initComponent(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all.js (line 83)
EventManager(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all.js (line 13)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] this.bottomToolbar.pageSize = rowsPerPage;
Sounds like you may want to read some tutorials on scope. There are a couple in the wiki tutorials on scope and specifics to some utilities ext provides so you can adjust scope when needed.
In firebug when you set a breakpoint you can inspect the DOM for whatever variables are in scope at any particular time on the 'right' side. Using the tree structure you can drill down into objects to see what all each object contains.
Hrm. Could you post a full test case for us to take a look at gotcha? The only other thing I can think of that may be affecting you would be if the toolbar hasn't been rendered yet.
The current code you posted does not have the suggested scope fix and or attempt to manipulate the bottomToolbar after the GridPanel has been rendered.
If the scope fix did not work for you. Did you inspect what the this variable was in the function call? Is it a grid? if it a grid, does it have a property called bottomToolbar? If not, try override the afterRender method of GridPanel as teh bottom toolbar will definitely exist then.
afterRender: function() {
TblListGrid.superclass.afterRender.call(this);
// your code to setup listening to the pagingtoolbar events
}
Ok, I have the paging tool bar disabled when the page initializes. But, I noticed that the icon/image used for the refresh button (in the disabled state of paging tool bar) is the same as the one which is used when one clicks refresh button. The icon resembles the dots swirling around.. indicating progress.
This is misleading.
Questions -
Am I doing this the right way to disable the paging tool bar (set property disabled: true)
Should I be doing something else to get the refresh button to use the right icon in disabled state?
Here is the code.. its as is in our project. Hopefully, this will give you an idea.
Good idea.. let me try using breakpoints.. but that would mean, setting up my machine with all the software to run the website locally. Lets see.. will keep you posted.
 Where's The Advantage In Windows Genuine Advantage?
 Stocks Bounce After S&P Joins Bear Market
|
