PDA

View Full Version : [CLOSED] Delay loading of data



cwolcott
Jun 15, 2012, 8:31 PM
I would like to delay the loading of data until the ListFilter is selected by the user. Is it possible?

The ListFilter is associated with a Store, which is associated with a LinqDataSource.



<script type="text/javascript">
var myCreateMenu = function (config) {

var menuCfg = config.menuItems ? {items : config.menuItems} : {},
menu;

Ext.copyTo(menuCfg, config, "labelField,loadingText,loadOnShow,single,store,opt ions");
Ext.apply(menuCfg, {
height : 297 ///!!! to get scrolling
});

menu = Ext.create('Ext.ux.grid.menu.ListMenu', menuCfg);
menu.self.xtype = "menu"; //!!! workaround for ExtJS bug
menu.on('checkchange', this.onCheckChange, this);
return menu;
};
</script>
...
<ext:GridPanel runat="server" Region="Center" >
<Bin>
<ext:Store ID="CmdLvl_Store" runat="server" DataSourceId="CmdLvl_LDS">
<Model>
<ext:Model runat="server" IDProperty="FullDescr">
<Fields>
<ext:ModelField Name="CmdLvl" Mapping="CmdLvl" />
<ext:ModelField Name="id" Mapping="FullDescr" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Container runat="server">
<Content>
<asp:LinqDataSource ID="CmdLvl_LDS" runat="server" ContextTypeName="CFV.CFVDataContext"
OnSelecting="CmdLvlLDS_Selecting" />
</Content>
</ext:Container>
</Bin>
...
<ColumnModel runat="server">
<ext:Column runat="server" Text="CmdLvl" DataIndex="CmdLvl" Align="Center" Hideable="false" width="60" />
</ColumnModel>
...
<Features>
<ext:GridFilters ID="Filters" runat="server">
<ext:ListFilter DataIndex="CmdLvl" StoreId="CmdLvl_Store" LabelField="id" >
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
</CustomConfig>
</ext:ListFilter>
</ext:GridFilters>
</Features
...
</ext:GridPanel>
...

Daniil
Jun 17, 2012, 6:50 PM
Hi Chris,

I think it should be possible.

I would try the following.

1. Do not set up DataSourceID initially.

2. Set up

AutoLoad="false"
for the Store.

3. Override the ListFilter createMenu.

Markup

<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
</CustomConfig>
</ext:ListFilter>

JavaScript

var myCreateMenu = function (config) {
var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
menu.on('checkchange', this.onCheckChange, this);
menu.on('beforeshow', function () { /*call a DirectMethod to bind the Store */ });
return menu;
};

4. Within the DirectMethod call.

StoreOptions.DataSourceID = SomeDataSourceID;
StoreOptions.DataBind();

Theoretically it should work well. If you will face any problems, please feel free to report.

cwolcott
Jun 19, 2012, 3:11 PM
I was out yesterday so I am just getting to this today. I have 5 ListFilters so I was hoping to be a little more dynamic. Can I pass the name of the DirectMethod into the createmenu javascript code?

Markup


<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
<%-- Pass the name of the direct method like 'test1_BindDataSource' --%>
</CustomConfig>
</ext:ListFilter>


Javascript


var myCreateMenu = function (config) {
var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
var variableHoldingDirectMethod = ??

menu.on('checkchange', this.onCheckChange, this);
menu.on('beforeshow', function () {
Ext.net.DirectMethod.request(variableHoldingDirect Method);
});
return menu; };


Server Code


[DirectMethod (ClientProxy = ClientProxy.Ignore)]
public void test1_BindDataSource()
{
StoreOptions.DataSourceId = "Test1_LDS";
StoreOptions.DataBind();
}

Daniil
Jun 19, 2012, 3:40 PM
As an additional ConfigItem.

<ext:ConfigItem Name="directMethodName" Value="someName" Mode="Value" />

Then you can access it within the createMenu function:

this.directMethodName

cwolcott
Jun 19, 2012, 3:52 PM
As an additional ConfigItem.

<ext:ConfigItem Name="directMethodName" Value="someName" Mode="Value" />

Then you can access it within the createMenu function:

this.directMethodName

I received the following error 'The ajax instance method 'Click' is absent!' when I tried the
Ext.net.DirectMethod.request(this.directMethodName );
But when I assigned it
var aa = this.directMethodName; and called
Ext.net.DirectMethod.request(aa); it worked.

Markup


<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
<ext:ConfigItem Name="directMethodName" Value="text_BindDataSource" Mode="Value" />
</CustomConfig>
</ext:ListFilter>


Javascript


var myCreateMenu = function (config) {
var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
var aa = this.directMethodName;

menu.on('checkchange', this.onCheckChange, this);
menu.on('beforeshow', function () {
Ext.net.DirectMethod.request(aa);
});
return menu; };

Daniil
Jun 19, 2012, 9:22 PM
Before I will check it, please ensure there is no inconsistency here:

<ext:ConfigItem Name="directMethodName" Value="text_BindDataSource" Mode="Value" />
and

[DirectMethod (ClientProxy = ClientProxy.Ignore)]
public void test1_BindDataSource()



I see the different names: "text_BindDataSource" and "test1_BindDataSource".

cwolcott
Jun 19, 2012, 9:32 PM
Sorry for the poor typing.

Everything is consistant within my source code but incorrect in the previous post.
Here it is all fixed up.

Markup


<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
<CustomConfig>
<ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
<ext:ConfigItem Name="directMethodName" Value="test1_BindDataSource" Mode="Value" />
</CustomConfig>
</ext:ListFilter>


Server Code


[DirectMethod (ClientProxy = ClientProxy.Ignore)]
public void test1_BindDataSource() {
StoreOptions.DataSourceId = "Test1_LDS";
StoreOptions.DataBind();
}


Javascript (Works)


var myCreateMenu = function (config) {
var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
var aa = this.directMethodName;
menu.on('checkchange', this.onCheckChange, this);
menu.on('beforeshow', function () {
Ext.net.DirectMethod.request(aa);
});
return menu;
};


Javascript (Fails)
I received the following error 'The ajax instance method 'Click' is absent!' when I tried the this.


var myCreateMenu = function (config) {
var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);

menu.on('checkchange', this.onCheckChange, this);
menu.on('beforeshow', function () {
Ext.net.DirectMethod.request(this.directMethodName );
});
return menu;
};

Daniil
Jun 19, 2012, 9:55 PM
I have just understood the problem. It's a scope issue.

The scope of the "beforeshow" listener is the menu by default, not the ListFilter.

So, this

this.directMethodName
is just not defined, I think.

You can set up a custom scope passing it as the third argument of the "on" method.

So, the following should work.

menu.on(
'beforeshow',
function () {
Ext.net.DirectMethod.request(aa);
},
this);

Daniil
Aug 08, 2012, 4:20 PM
Hi Chris,

I have just committed the fix (to the 2.1 branch) related to the topic.

With that fix the solution can be much simplified/improved.

The following should work.

1. Keep

AutoLoad="false"
for the Store.

2. Set up a PageProxy and an OnReadData handler for the Store.

3. Just call

store.DataBind();
within the OnReadData handler.

4. The benefits: no need to have CustomConfig for the List Filters and, respectively, any JavaScript.