ghendricks
27 Sep 2007, 12:06 PM
I have a layout consisting of multiple panels (tabs) in the center area in which I load grids, one grid per panel. My issue is that the sizing of the grids is not behaving as I would expect. What I am trying to do is have the grid automatically size itself to fill the whole space within the panel when the panel is activated. This seems to happen by default only on the panel that loads initially (with layout.getRegion().showpanel). Any of the other tabs I click, load the grid and size it according to the height and width styles on the grid's div element.
The thing that confuses me is that all the grids have the same width and height set, so why does the initially loaded grid autosize where the others do not?
I have looked repeatedly at the examples, the docs, and the forum for an answer and have tried several things without success, such as setting fitToFrame and resizeEl in my panel definiton, and adding grid.autosize call to the panels, onactivate event.
I am sure there is a simple solution, but after hours of trying everything I could think of I am ready to post here.
Here is my code:
<script type="text/javascript">
var product_id = [% product.id || 0 %];
var TestopiaProductView = {
init: function(){
var layout = new Ext.BorderLayout(document.getElementById('productcontainer'), {
west: {
split:true,
initialSize: 212,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll: true
},
east: {
split:true,
initialSize: 212,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});
// Prepare the product tree
var classRoot = new Ext.tree.AsyncTreeNode({
text: 'Classifications',
dragable: false,
id: 'classes'
});
// Panel declarations
var productsPanel = new Ext.tree.TreePanel('products_tree', {
loader: new Ext.tree.TreeLoader({
dataUrl:'tr_quicksearch.cgi',
baseParams: {action: 'getclassificationstree'}
}),
animate: true,
enableDD: false,
rootVisible: true,
singleExpand:true,
containerScroll: true
});
var dashboardPanel = new Ext.ContentPanel('center-dash',
{title: 'Dashboard',
closable: false,
url: 'tr_show_product.cgi',
params: {action: 'dashboard', product_id: product_id}
});
var planPanel = new Ext.ContentPanel('center-plan',
{title: 'Test Plans',
closable: false,
fitToFrame: true,
resizeEl: 'plan-grid'
});
var casePanel = new Ext.ContentPanel('center-case',
{title: 'Test Cases',
closable: false
});
var runPanel = new Ext.ContentPanel('center-run',
{title: 'Test Runs',
closable: false
});
var buildPanel = new Ext.ContentPanel('center-build',
{title: 'Builds',
closable: false,
fitToFrame: true,
resizeEl: 'build-grid'
});
var categoryPanel = new Ext.ContentPanel('center-category', {title: 'Categories', closable: false});
var envPanel = new Ext.ContentPanel('center-env', {title: 'Environments', closable: false});
buildPanel.getUpdateManager().loadScripts = true;
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('west-tree', {title: 'Products'}));
layout.add('center', dashboardPanel);
layout.add('center', planPanel);
layout.add('center', casePanel);
layout.add('center', runPanel);
layout.add('center', buildPanel);
layout.add('center', categoryPanel);
layout.add('center', envPanel);
layout.add('east', new Ext.ContentPanel('east-tags', {title: 'Tags', closable: true}));
layout.add('east', new Ext.ContentPanel('east-reports', {title: 'Reports', closable: true}));
layout.getRegion('center').showPanel('center-plan');
layout.getRegion('east').showPanel('east-tags');
layout.endUpdate();
productsPanel.setRootNode(classRoot);
productsPanel.render();
classRoot.expand();
var planView = new TestopiaProductPlans;
var buildView = new TestopiaProductBuilds;
// event handlers
productsPanel.on('click', function(){
var node = productsPanel.getSelectionModel().getSelectedNode();
if(node.isLeaf()){
product_id = node.id;
planView.planStore.load();
buildView.buildStore.load();
planView.planGridVersionsStore.baseParams = {action:'getversions', product_id: product_id};
dashboardPanel.params = {action: 'dashboard', product_id: product_id};
dashboardPanel.setUrl('tr_show_product.cgi');
dashboardPanel.refresh();
}
});
planPanel.on('activate', planView.planGrid.autoSize, planView.planGrid);
buildPanel.on('activate', function(){
buildView.buildGrid.render();
buildView.buildStore.load();
});
dashboardPanel.on('activate', function(){
});
planView.planStore.load({params:{start:0, limit:25}});
var reportPanel = new Ext.ContentPanel(Ext.id(),{autoCreate:true, title: 'Custom Report', closable: true});
Ext.get('add-link').on('click', function(){
layout.add('center', reportPanel);
// reportPanel.setUrl('tr_quicksearch.cgi');
});
}
};
var test = {
init: function(){
var gridview = new TestopiaProductBuilds
gridview.buildStore.load();
}
}
Ext.onReady(TestopiaProductView.init, TestopiaProductView);
//Ext.onReady(test.init, test);
</script>
<style type="text/css">
.grid-layouts{
border:1px solid #99bbe8;
position:relative;
left:0;
top:0;
width: 800px;
height: 597px;
}
</style>
<div id="productcontainer" style="height:650px">
<div id="west-tree">
<div id="products_tree"></div>
</div>
<div id="center-dash">
</div>
<div id="center-plan">
<div id="plan-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="grideditform"></div>
</div>
<div id="center-case">
<div id="case-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="caseeditform"></div>
</div>
<div id="center-run">
<div id="run-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="runeditform"></div>
</div>
<div id="center-build">
<div id="build-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="buildeditform"></div>
</div>
<div id="center-category">
<div id="category-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="categoryeditform"></div>
</div>
<div id="center-env">
</div>
<div id="east-tags"></div>
<div id="east-reports">
<a id="completionreport">Completion Percentage</a><br/>
<a id="passreport">Status Report</a><br/><br/>
<a id="add-link">Add</a>
</div>
</div>
And here is one of my grids:
TestopiaProductPlans = function(){
function planLink (id){
return '<a href="tr_show_plan.cgi?plan_id=' + id +'">' + id +'</a>';
}
function editPlans(){
var selections = planGrid.getSelectionModel().getSelections();
console.log(selections.length);
for (var i = 0; i < selections.length; i++){
console.log(i);
console.log(selections[i].id);
}
}
function removePlans(){
}
function archivePlans(){
}
var planStore = new Ext.data.JsonStore({
url: 'tr_show_product.cgi?action=getplans',
totalProperty: 'totalResultsAvailable',
root: 'Result',
id: 'plan_id',
fields: [
{name: "plan_id", mapping:"plan_id"},
{name: "plan_name", mapping:"name"},
{name: "author_name", mapping:"author_name"},
{name: "creation_date", mapping:"creation_date"},
{name: "product_name", mapping:"product_name"},
{name: "prod_version", mapping:"default_product_version"},
{name: "plan_type", mapping:"plan_type"},
{name: "case_count", mapping:"case_count"},
{name: "run_count", mapping:"run_count"}
],
remoteSort: true
});
// product versions
var planGridVersionsStore = new Ext.data.JsonStore({
url: 'tr_quicksearch.cgi',
root: 'versions',
baseParams: {action:'getversions', product_id: product_id},
fields: [{name:'id', mapping: 'id'},{name:'name', mapping:'name'}]
});
var planGridTypesStore = new Ext.data.JsonStore({
url: 'tr_quicksearch.cgi',
root: 'types',
baseParams: {action:'getplantypes'},
fields: [{name:'id', mapping: 'id'},{name:'name', mapping:'name'}]
});
var planCols = new Ext.grid.ColumnModel(
[{header: "ID", width: 50, dataIndex: 'plan_id', renderer: planLink},
{header: "Name",
width: 220,
dataIndex: 'plan_name',
id: "plan_name",
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
}))
},
{header: "Author", width: 150, dataIndex: 'author_name'},
{header: "Created", width: 110, dataIndex: 'creation_date', hidden: true},
{header: "Product", width: 180, dataIndex: 'product_name', hidden: true},
{header: "Product Version", width: 100,
dataIndex: 'prod_version',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: planGridVersionsStore,
displayField: 'name',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
allowBlank: false,
forceSelection: true,
grow: true
})
)
},
{header: "Type", width: 100,
dataIndex: 'plan_type',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: planGridTypesStore,
displayField: 'name',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
allowBlank: false,
forceSelection: true,
editable: false,
listWidth: 300
})
)
},
{header: "Cases", width: 40, dataIndex: 'case_count'},
{header: "Runs", width: 40, dataIndex: 'run_count'}
]);
var planGridForm = new Ext.form.Form({});
var planGrid = new Ext.grid.EditorGrid('plan-grid', {
ds: planStore,
cm: planCols,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false,
autoExpandColumn: "plan_name",
loadMask: true
});
// make the grid resizable, do before render for better performance
var planResizer = new Ext.Resizable('plan-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's e se'
});
var planGridMenu = new Ext.menu.Menu({
id: 'plangridmenu' ,
items: [
{text: 'Edit Selected Plans', handler: editPlans},
{text: 'Remove Selected Plans', handler: removePlans},
{text: 'Archive Selected Plans', handler: archivePlans},
]
});
planStore.paramNames.sort = "order";
planStore.on('beforeload', function() {
planStore.baseParams = {
action: 'getplans',
product_id: product_id,
name: planFilter.getValue()
};
});
planCols.defaultSortable = true;
planResizer.on('resize', planGrid.autoSize, planGrid);
planGrid.on('afteredit', function(gevent){
var myparams;
switch(gevent.field){
case 'prod_version':
myparams = {action: "Commit", ajax: "true", prod_version: gevent.value, plan_id: ds.getAt(gevent.row).get('plan_id')};
break;
case 'plan_type':
myparams = {action: "Commit", ajax: "true", plan_type: gevent.value, plan_id: ds.getAt(gevent.row).get('plan_id')};
break;
case 'plan_name':
myparams = {action: "Commit", ajax: "true", plan_name: gevent.value, plan_id: ds.getAt(gevent.row).get('plan_id')};
break;
}
planGridForm.submit({
url:"tr_show_plan.cgi",
params: myparams,
success: function(form, action) {alert("Submitted");}
});
});
planGrid.on('contextmenu', function(e){
planGridMenu.showAt(e.getXY());
e.stopEvent();
}, this);
planGrid.render();
var planGridFoot = planGrid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer
var planPager = new Ext.PagingToolbar(planGridFoot, planStore, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying test plans {0} - {1} of {2}',
emptyMsg: "No test plans were found"
});
planPager.add('-', 'Filter: '); // add a separator followed by a text string to label the filter input
var planFilter = Ext.get(planPager.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input',
type: 'text',
size: '30',
value: '',
cls: 'x-grid-filter'
}).el);
planFilter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER) // listen for the ENTER key
ds.load({ // call the load() method of your datastore
params: {
start: 0, // reset the start to 0 since you want the filtered results to start from the first page
limit: 25
}
});
});
planFilter.on('keyup', function(e) { // setup an onkeyup event handler
var key = e.getKey(); // assign the current key to a local variable
if((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0) // listen for the BACKSPACE or DELETE keys and the field being empty
ds.load({ // call the load() method of your datastore
params: {
start: 0, // reset the start to 0 since you want unfiltered results to start from the first page
limit: 25
}
});
});
planFilter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected
this.planStore = planStore;
this.planFilter = planFilter;
this.planGrid = planGrid;
this.planGridVersionsStore = planGridVersionsStore;
return this;
}
The thing that confuses me is that all the grids have the same width and height set, so why does the initially loaded grid autosize where the others do not?
I have looked repeatedly at the examples, the docs, and the forum for an answer and have tried several things without success, such as setting fitToFrame and resizeEl in my panel definiton, and adding grid.autosize call to the panels, onactivate event.
I am sure there is a simple solution, but after hours of trying everything I could think of I am ready to post here.
Here is my code:
<script type="text/javascript">
var product_id = [% product.id || 0 %];
var TestopiaProductView = {
init: function(){
var layout = new Ext.BorderLayout(document.getElementById('productcontainer'), {
west: {
split:true,
initialSize: 212,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll: true
},
east: {
split:true,
initialSize: 212,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});
// Prepare the product tree
var classRoot = new Ext.tree.AsyncTreeNode({
text: 'Classifications',
dragable: false,
id: 'classes'
});
// Panel declarations
var productsPanel = new Ext.tree.TreePanel('products_tree', {
loader: new Ext.tree.TreeLoader({
dataUrl:'tr_quicksearch.cgi',
baseParams: {action: 'getclassificationstree'}
}),
animate: true,
enableDD: false,
rootVisible: true,
singleExpand:true,
containerScroll: true
});
var dashboardPanel = new Ext.ContentPanel('center-dash',
{title: 'Dashboard',
closable: false,
url: 'tr_show_product.cgi',
params: {action: 'dashboard', product_id: product_id}
});
var planPanel = new Ext.ContentPanel('center-plan',
{title: 'Test Plans',
closable: false,
fitToFrame: true,
resizeEl: 'plan-grid'
});
var casePanel = new Ext.ContentPanel('center-case',
{title: 'Test Cases',
closable: false
});
var runPanel = new Ext.ContentPanel('center-run',
{title: 'Test Runs',
closable: false
});
var buildPanel = new Ext.ContentPanel('center-build',
{title: 'Builds',
closable: false,
fitToFrame: true,
resizeEl: 'build-grid'
});
var categoryPanel = new Ext.ContentPanel('center-category', {title: 'Categories', closable: false});
var envPanel = new Ext.ContentPanel('center-env', {title: 'Environments', closable: false});
buildPanel.getUpdateManager().loadScripts = true;
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('west-tree', {title: 'Products'}));
layout.add('center', dashboardPanel);
layout.add('center', planPanel);
layout.add('center', casePanel);
layout.add('center', runPanel);
layout.add('center', buildPanel);
layout.add('center', categoryPanel);
layout.add('center', envPanel);
layout.add('east', new Ext.ContentPanel('east-tags', {title: 'Tags', closable: true}));
layout.add('east', new Ext.ContentPanel('east-reports', {title: 'Reports', closable: true}));
layout.getRegion('center').showPanel('center-plan');
layout.getRegion('east').showPanel('east-tags');
layout.endUpdate();
productsPanel.setRootNode(classRoot);
productsPanel.render();
classRoot.expand();
var planView = new TestopiaProductPlans;
var buildView = new TestopiaProductBuilds;
// event handlers
productsPanel.on('click', function(){
var node = productsPanel.getSelectionModel().getSelectedNode();
if(node.isLeaf()){
product_id = node.id;
planView.planStore.load();
buildView.buildStore.load();
planView.planGridVersionsStore.baseParams = {action:'getversions', product_id: product_id};
dashboardPanel.params = {action: 'dashboard', product_id: product_id};
dashboardPanel.setUrl('tr_show_product.cgi');
dashboardPanel.refresh();
}
});
planPanel.on('activate', planView.planGrid.autoSize, planView.planGrid);
buildPanel.on('activate', function(){
buildView.buildGrid.render();
buildView.buildStore.load();
});
dashboardPanel.on('activate', function(){
});
planView.planStore.load({params:{start:0, limit:25}});
var reportPanel = new Ext.ContentPanel(Ext.id(),{autoCreate:true, title: 'Custom Report', closable: true});
Ext.get('add-link').on('click', function(){
layout.add('center', reportPanel);
// reportPanel.setUrl('tr_quicksearch.cgi');
});
}
};
var test = {
init: function(){
var gridview = new TestopiaProductBuilds
gridview.buildStore.load();
}
}
Ext.onReady(TestopiaProductView.init, TestopiaProductView);
//Ext.onReady(test.init, test);
</script>
<style type="text/css">
.grid-layouts{
border:1px solid #99bbe8;
position:relative;
left:0;
top:0;
width: 800px;
height: 597px;
}
</style>
<div id="productcontainer" style="height:650px">
<div id="west-tree">
<div id="products_tree"></div>
</div>
<div id="center-dash">
</div>
<div id="center-plan">
<div id="plan-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="grideditform"></div>
</div>
<div id="center-case">
<div id="case-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="caseeditform"></div>
</div>
<div id="center-run">
<div id="run-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="runeditform"></div>
</div>
<div id="center-build">
<div id="build-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="buildeditform"></div>
</div>
<div id="center-category">
<div id="category-grid" class="grid-layout" style="width: 1024px; height:800px;"></div>
<div id="categoryeditform"></div>
</div>
<div id="center-env">
</div>
<div id="east-tags"></div>
<div id="east-reports">
<a id="completionreport">Completion Percentage</a><br/>
<a id="passreport">Status Report</a><br/><br/>
<a id="add-link">Add</a>
</div>
</div>
And here is one of my grids:
TestopiaProductPlans = function(){
function planLink (id){
return '<a href="tr_show_plan.cgi?plan_id=' + id +'">' + id +'</a>';
}
function editPlans(){
var selections = planGrid.getSelectionModel().getSelections();
console.log(selections.length);
for (var i = 0; i < selections.length; i++){
console.log(i);
console.log(selections[i].id);
}
}
function removePlans(){
}
function archivePlans(){
}
var planStore = new Ext.data.JsonStore({
url: 'tr_show_product.cgi?action=getplans',
totalProperty: 'totalResultsAvailable',
root: 'Result',
id: 'plan_id',
fields: [
{name: "plan_id", mapping:"plan_id"},
{name: "plan_name", mapping:"name"},
{name: "author_name", mapping:"author_name"},
{name: "creation_date", mapping:"creation_date"},
{name: "product_name", mapping:"product_name"},
{name: "prod_version", mapping:"default_product_version"},
{name: "plan_type", mapping:"plan_type"},
{name: "case_count", mapping:"case_count"},
{name: "run_count", mapping:"run_count"}
],
remoteSort: true
});
// product versions
var planGridVersionsStore = new Ext.data.JsonStore({
url: 'tr_quicksearch.cgi',
root: 'versions',
baseParams: {action:'getversions', product_id: product_id},
fields: [{name:'id', mapping: 'id'},{name:'name', mapping:'name'}]
});
var planGridTypesStore = new Ext.data.JsonStore({
url: 'tr_quicksearch.cgi',
root: 'types',
baseParams: {action:'getplantypes'},
fields: [{name:'id', mapping: 'id'},{name:'name', mapping:'name'}]
});
var planCols = new Ext.grid.ColumnModel(
[{header: "ID", width: 50, dataIndex: 'plan_id', renderer: planLink},
{header: "Name",
width: 220,
dataIndex: 'plan_name',
id: "plan_name",
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
}))
},
{header: "Author", width: 150, dataIndex: 'author_name'},
{header: "Created", width: 110, dataIndex: 'creation_date', hidden: true},
{header: "Product", width: 180, dataIndex: 'product_name', hidden: true},
{header: "Product Version", width: 100,
dataIndex: 'prod_version',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: planGridVersionsStore,
displayField: 'name',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
allowBlank: false,
forceSelection: true,
grow: true
})
)
},
{header: "Type", width: 100,
dataIndex: 'plan_type',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: planGridTypesStore,
displayField: 'name',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
allowBlank: false,
forceSelection: true,
editable: false,
listWidth: 300
})
)
},
{header: "Cases", width: 40, dataIndex: 'case_count'},
{header: "Runs", width: 40, dataIndex: 'run_count'}
]);
var planGridForm = new Ext.form.Form({});
var planGrid = new Ext.grid.EditorGrid('plan-grid', {
ds: planStore,
cm: planCols,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false,
autoExpandColumn: "plan_name",
loadMask: true
});
// make the grid resizable, do before render for better performance
var planResizer = new Ext.Resizable('plan-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's e se'
});
var planGridMenu = new Ext.menu.Menu({
id: 'plangridmenu' ,
items: [
{text: 'Edit Selected Plans', handler: editPlans},
{text: 'Remove Selected Plans', handler: removePlans},
{text: 'Archive Selected Plans', handler: archivePlans},
]
});
planStore.paramNames.sort = "order";
planStore.on('beforeload', function() {
planStore.baseParams = {
action: 'getplans',
product_id: product_id,
name: planFilter.getValue()
};
});
planCols.defaultSortable = true;
planResizer.on('resize', planGrid.autoSize, planGrid);
planGrid.on('afteredit', function(gevent){
var myparams;
switch(gevent.field){
case 'prod_version':
myparams = {action: "Commit", ajax: "true", prod_version: gevent.value, plan_id: ds.getAt(gevent.row).get('plan_id')};
break;
case 'plan_type':
myparams = {action: "Commit", ajax: "true", plan_type: gevent.value, plan_id: ds.getAt(gevent.row).get('plan_id')};
break;
case 'plan_name':
myparams = {action: "Commit", ajax: "true", plan_name: gevent.value, plan_id: ds.getAt(gevent.row).get('plan_id')};
break;
}
planGridForm.submit({
url:"tr_show_plan.cgi",
params: myparams,
success: function(form, action) {alert("Submitted");}
});
});
planGrid.on('contextmenu', function(e){
planGridMenu.showAt(e.getXY());
e.stopEvent();
}, this);
planGrid.render();
var planGridFoot = planGrid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer
var planPager = new Ext.PagingToolbar(planGridFoot, planStore, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying test plans {0} - {1} of {2}',
emptyMsg: "No test plans were found"
});
planPager.add('-', 'Filter: '); // add a separator followed by a text string to label the filter input
var planFilter = Ext.get(planPager.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input',
type: 'text',
size: '30',
value: '',
cls: 'x-grid-filter'
}).el);
planFilter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER) // listen for the ENTER key
ds.load({ // call the load() method of your datastore
params: {
start: 0, // reset the start to 0 since you want the filtered results to start from the first page
limit: 25
}
});
});
planFilter.on('keyup', function(e) { // setup an onkeyup event handler
var key = e.getKey(); // assign the current key to a local variable
if((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0) // listen for the BACKSPACE or DELETE keys and the field being empty
ds.load({ // call the load() method of your datastore
params: {
start: 0, // reset the start to 0 since you want unfiltered results to start from the first page
limit: 25
}
});
});
planFilter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected
this.planStore = planStore;
this.planFilter = planFilter;
this.planGrid = planGrid;
this.planGridVersionsStore = planGridVersionsStore;
return this;
}