Sencha Touch Vbox

0
votes

I have below requirement of a page with sencha touch:

  1. A drop down of some options
  2. A question posted by users (length may vary big time)
  3. a text area to display get the answer
  4. Two buttons for submit and ignore

I am using vbox layout. Now the problem is I want the page to be fully scrollable instead of partial scrolls on dataview etc.

How can I achieve it. I have similar requirements for different screens.

Below is the code:

Ext.define('HCMDoctor.view.PFQuestion', {
        extend : 'Ext.form.Panel',
        xtype : 'PFQuestion',
        id : 'pfView',
        config : {
            layout : {
                type : 'vbox',
                align : 'stretch'
            },
            flex : 1,
            scrollable : true,
            items : [{
                        xtype : 'container',
                        html : 'Public Forum Question' 
                    }, {
                        xtype : 'selectfield',
                        store : 'CommunityWiseQuestions',
                        name : 'pfCommId',
                        id : 'pfCommId',
                        valueField : 'communityId',
                        displayField : 'displayFull'
                    }, {
                        store : 'PFQuestion',
                        xtype : 'dataview',
                        flex : 1,
                        id : 'pfQuestionHolder',
                        itemTpl : ['{discussionTitle}<br>{description}',
                                '<br>Posted in {postedInCommunityName}']
                    }, {
                        xtype : 'hiddenfield',
                        id : 'pfQuestionId',
                        name : 'pfQuestionId'

                    }, {
                        xtype : 'textareafield',
                        id : 'pfAnswer',
                        name : 'pfAnswer'
                    }, {
                        store : 'PFQuestion',
                        xtype : 'button',
                        text : 'Ignore',
                        id : 'ignorePFQuestion'
                    }, {
                        store : 'PFQuestion',
                        xtype : 'button',
                        text : 'Submit',
                        id : 'submitPFQuestion'
                    }

            ]

        }
    });

Thanks

1
extjssencha-touch
why is pfQuestionHolder a dataview? It could very well be a Panel with data & tpl attribute to achieve what you want. – ThinkFloyd
when u say data do you mean it to be hardcoded? I need the data from the server... If you can suggest me a way to have a panel with store or applying store data I am fully fine. – Vikash Agrawal

1 Answers

0
votes

onload of store iterate over records and in every iteration create panel with tpl by passing record data to it and add the panel to its parent. something like this:

var parentPanel = Ext.getCmp("pfView");
for(var i=0; i++; i<records.size){
    var mypanel = Ext.create("Ext.Panel", {
        data    : records[i]
    });
    parentPanel.add(myPanel);
}